.h1 {
    font-size: 24pt;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.h2 {
    font-weight: 300;
    font-size: 18pt;
    letter-spacing: -0.05em;
}

.h3 {
    font-size: 11pt;
}

label.h4,
.h4 label {
    font-weight: 700;
    opacity: 0.8;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.primary {
    font-weight: 500;
    font-size: 1.22em
}

.small-label {
    // NOTE: Intended to match the Pango size of `<small>` and `size='smaller'`
    font-size: 0.85em;
}

.accent,
.link,
:link {
    @if $color-scheme == "light" {
        color: #{'shade(@accent_color, 0.75)'};
    } @else if $color-scheme == "dark" {
        color: #{'mix(@accent_color, white, 0.1)'};
    }

    &.red {
        @if $color-scheme == "light" {
            color: $STRAWBERRY_500;
        } @else if $color-scheme == "dark" {
            color: mix($STRAWBERRY_100, $STRAWBERRY_300, $weight: 50%);
        }
    }

    &.orange {
        @if $color-scheme == "light" {
            color: $ORANGE_700;
        } @else if $color-scheme == "dark" {
            color: mix($ORANGE_300, $ORANGE_500, $weight: 25%);
        }
    }

    &.yellow {
        @if $color-scheme == "light" {
            color: mix($BANANA_700, $BANANA_900, $weight: 50%);
        } @else if $color-scheme == "dark" {
            color: $BANANA_500;
        }
    }

    &.green {
        @if $color-scheme == "light" {
            color: mix($LIME_700, $LIME_900, $weight: 50%);
        } @else if $color-scheme == "dark" {
            color: $LIME_500;
        }
    }

    &.blue {
        @if $color-scheme == "light" {
            color: mix($BLUEBERRY_500, $BLUEBERRY_700, $weight: 50%);
        } @else if $color-scheme == "dark" {
            color: mix($BLUEBERRY_300, $BLUEBERRY_500, $weight: 50%);
        }
    }

    &.purple {
        @if $color-scheme == "light" {
            color: mix($GRAPE_500, $GRAPE_700, $weight: 50%);
        } @else if $color-scheme == "dark" {
            color: mix($GRAPE_300, $GRAPE_500, $weight: 50%);
        }
    }

    &.brown {
        @if $color-scheme == "light" {
            color: mix($COCOA_300, $COCOA_300, $weight: 75%);
        } @else if $color-scheme == "dark" {
            color: mix($COCOA_100, white, $weight: 90%);
        }
    }

    &.mint {
        @if $color-scheme == "light" {
            color: $MINT_700;
        } @else if $color-scheme == "dark" {
            color: mix($MINT_500, $MINT_700, $weight: 75%);
        }
    }

    &.pink {
        @if $color-scheme == "light" {
            color: mix($BUBBLEGUM_500, $BUBBLEGUM_700, $weight: 50%);
        } @else if $color-scheme == "dark" {
            color: mix($BUBBLEGUM_300, $BUBBLEGUM_100, $weight: 75%);
        }
    }

    &.slate {
        @if $color-scheme == "light" {
            color: mix($SLATE_300, $SLATE_500, $weight: 75%);
        } @else if $color-scheme == "dark" {
            color: $SLATE_100;
        }
    }

    &.latte {
        @if $color-scheme == "light" {
            color: mix($LATTE_300, $LATTE_500, $weight: 75%);
        } @else if $color-scheme == "dark" {
            color: $LATTE_100;
        }
    }

    &:backdrop {
        color: $fg-color;
        opacity: 0.6;
    }
}

.dim-label,
:visited {
    opacity: 0.75;
}

label:disabled {
    color: $insensitive-fg-color;
}

.keycap {
    background-color: bg-color(2);
    background-image:
        linear-gradient(
            to bottom,
            rgba(white, 0),
            #{'alpha(@highlight_color, 0.2)'}
        );
    border: 1px solid $toplevel-border-color;
    border-radius: rem(3px);
    box-shadow:
        outset-highlight(),
        inset 0 -1px 0 0 bg-color(4),
        0 1px 2px rgba(black, 0.05);
    font-size: 85%;
    min-width: rem(12px);
    // We add 1px on the bottom to account for box-shadow
    padding: rem(3px) rem(6px) calc(#{rem(3px)} + 1px);

    &:backdrop {
        background-image:
            linear-gradient(
                to bottom,
                #{'alpha(@highlight_color, 0.3)'},
                #{'alpha(@highlight_color, 0.35)'}
            );
    }
}

:link:hover label {
  text-decoration: underline;
}

.monospace {
    font-family: monospace;
}
