/* menu */
menu {
    display: flex;
    flex-direction: column;
    width: 20rem;
    max-width: 100%;
}

menu .item {
    padding: var(--pad-3) var(--pad-4);
    background: var(--color-raised);
    color: var(--color-text-raised);
    justify-content: flex-start;
    align-items: center;
    user-select: none;
    display: flex;
    gap: 1ch;
}

menu .item.active {
    background: var(--color-primary);
    color: var(--color-text-primary);
}

menu .item.active:hover {
    background: var(--color-primary-lowered);
}

menu .item:hover {
    text-decoration: none;
    background: var(--color-super-raised);
}

menu.round a:first-child {
    border-radius: var(--radius) var(--radius) 0 0;
}

menu.round a:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
}

menu.row {
    flex-direction: row;
    width: 100%;
}

menu.row.round a:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

menu.row.round a:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

menu.row .item {
    flex: 1 0 auto;
    justify-content: center;
}

@media screen and (max-width: 900px) {
    menu {
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
    }

    menu .item {
        border-radius: 0 !important;
        justify-content: center;
        flex: 1 0 auto;
    }
}

/* chip */
.chip {
    border-radius: 1rem;
    padding: var(--pad-1) calc(var(--pad-3) * 1.5);
    background: var(--color-lowered);
    height: 24px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.chip.green:not(.dark *) {
    background: var(--color-green);
    color: white !important;
}

.chip.secondary {
    background: var(--color-secondary);
    color: var(--color-text-secondary);
}

/* buttons */
@property --background-top {
    syntax: "<color>";
    initial-value: hsl(159.97, 100%, 30%);
    inherits: false;
}

@property --background-bottom {
    syntax: "<color>";
    initial-value: hsl(144.7, 100%, 26%);
    inherits: false;
}

.button.buy {
    --background: linear-gradient(
        to bottom,
        var(--background-top),
        var(--background-bottom)
    );
    background: var(--background);
    box-shadow:
        inset 0 0.25px 0 1px hsla(162.99, 100%, 19%, 25%),
        inset 0 -1px 1px hsla(162.99, 100%, 12%, 50%),
        inset -1px -1px 1px hsla(162.99, 100%, 12%, 50%);
    color: white !important;
    transition:
        box-shadow 0.15s,
        background 0.15s,
        --background-top 0.15s,
        --background-bottom 0.15s,
        transform 0.25s !important;
    font-weight: 600;
}

.button.buy:hover {
    --background-top: hsl(159.97, 100%, 32%);
    --background-bottom: hsl(144.7, 100%, 28%);
    background: var(--background) !important;
}

.button[disabled] {
    opacity: 75%;
    cursor: not-allowed;
}

/* icons */
.card.icon_focus svg.icon {
    width: 2em;
    height: 2em;
}

img.icon {
    width: 1em;
    height: 18px;
}