Dashboard layout template

@use "@wovenui/core" as *;

.dashboard {
    @include apply(
        grid, // display: grid
        cols(12) md, // 12 grid columns from md (768px) up
        bg(base), // page background, follows the theme
        text-color(regular), // regular text color, follows the theme
        border(1), // 1px border (width key 1), regular color
        rounded(lg), // corner radius: size key lg (0.75rem)
        overflow-hidden // clip content that overflows the box
    );
}

.dashboard__nav {
    @include apply(
        col-span(3) md, // span 3 of 12 columns from md (768px) up
        col-span(2) lg, // span 2 of 12 columns from lg (1024px) up
        p(4), // padding: spacing key 4 (1rem)
        bg(alternate) // alternate background, follows the theme
    );
}

.dashboard__brand {
    @include apply(
        m(0), // margin: 0
        mb(3), // bottom margin: spacing key 3 (0.75rem)
        font(semibold) // font weight: semibold (600)
    );
}

// A scrolling row below md, a column from md
.dashboard__menu {
    @include apply(
        flex, // display: flex
        col md, // flex direction: column from md (768px) up
        gap(1), // gap: spacing key 1 (0.25rem)
        m(0), // margin: 0
        p(0), // padding: 0
        overflow-x-auto, // scroll sideways when the row is too wide
        font-size(sm) // font size key sm (0.875rem)
    );
}

.dashboard__link {
    @include apply(
        block, // display: block
        px(3), // horizontal padding: spacing key 3 (0.75rem)
        py(2), // vertical padding: spacing key 2 (0.5rem)
        rounded(md), // corner radius: size key md (0.5rem)
        whitespace-nowrap, // keep the text on one line
        text-color(muted), // muted text color, follows the theme
        bg(hover) hover, // hover background on hover
        text-color(regular) hover // regular text color on hover
    );

    &[aria-current="page"] {
        @include apply(
            bg(selected), // selected item background
            text-color(brand), // brand text color
            font(medium) // font weight: medium (500)
        );
    }

    &:focus-visible {
        outline: token(border-focus-width) solid token(border-focus);
        outline-offset: token(border-focus-offset);
    }
}

.dashboard__main {
    @include apply(
        col-span(9) md, // span 9 of 12 columns from md (768px) up
        col-span(10) lg, // span 10 of 12 columns from lg (1024px) up
        p(4), // padding: spacing key 4 (1rem)
        p(6) md // padding key 6 (1.5rem) from md (768px) up
    );
}

.dashboard__header {
    @include apply(
        flex, // display: flex
        wrap, // let items wrap onto new lines
        between, // main axis: space between (justify-content)
        x-center, // cross axis: center (align-items)
        gap(3), // gap: spacing key 3 (0.75rem)
        mb(6) // bottom margin: spacing key 6 (1.5rem)
    );
}

.dashboard__title {
    @include apply(
        m(0), // margin: 0
        font-size(xl), // font size key xl (1.5rem)
        font(semibold) // font weight: semibold (600)
    );
}

.dashboard__button {
    @include apply(
        rounded(md), // corner radius: size key md (0.5rem)
        font-size(sm) // font size key sm (0.875rem)
    );
}

.dashboard__stats {
    @include apply(
        grid, // display: grid
        cols(1), // one grid column
        cols(3) sm, // three columns from sm (640px) up
        gap(4), // gap: spacing key 4 (1rem)
        m(0), // margin: 0
        p(0) // padding: 0
    );
}

.dashboard__stat {
    @include apply(
        p(4), // padding: spacing key 4 (1rem)
        bg(surface), // surface background, follows the theme
        border(1), // 1px border (width key 1), regular color
        rounded(lg) // corner radius: size key lg (0.75rem)
    );
}

.dashboard__label {
    @include apply(
        m(0), // margin: 0
        font-size(sm), // font size key sm (0.875rem)
        text-color(muted) // muted text color, follows the theme
    );
}

.dashboard__value {
    @include apply(
        m(0), // margin: 0
        mt(1), // top margin: spacing key 1 (0.25rem)
        font-size(2xl), // font size key 2xl (1.75rem)
        font(semibold) // font weight: semibold (600)
    );
}

.dashboard__panel {
    @include apply(
        mt(6), // top margin: spacing key 6 (1.5rem)
        bg(surface), // surface background, follows the theme
        border(1), // 1px border (width key 1), regular color
        rounded(lg) // corner radius: size key lg (0.75rem)
    );
}

.dashboard__panel-title {
    @include apply(
        m(0), // margin: 0
        px(4), // horizontal padding: spacing key 4 (1rem)
        py(3), // vertical padding: spacing key 3 (0.75rem)
        font-size(base), // font size key base (1rem)
        font(semibold), // font weight: semibold (600)
        border-bottom(1) // 1px bottom border (width key 1), regular color
    );
}

.dashboard__orders {
    @include apply(
        m(0), // margin: 0
        p(0), // padding: 0
        font-size(sm) // font size key sm (0.875rem)
    );
}

.dashboard__order {
    @include apply(
        flex, // display: flex
        between, // main axis: space between (justify-content)
        gap(4), // gap: spacing key 4 (1rem)
        px(4), // horizontal padding: spacing key 4 (1rem)
        py(3), // vertical padding: spacing key 3 (0.75rem)
        border-bottom(1), // 1px bottom border (width key 1), regular color
        border-bottom(0) last-child // no bottom border when it is the last child
    );
}

.dashboard__amount {
    @include apply(text-color(muted)); // muted text color, follows the theme
}