$color-grey-900: hsl(240 5% 20%);
$color-grey-800: hsl(240 5% 25%);
$color-grey-700: hsl(240 5% 35%);
$color-grey-600: hsl(240 5% 45%);
$color-grey-500: hsl(240 5% 50%);
$color-grey-400: hsl(240 5% 60%);
$color-grey-300: hsl(240 5% 75%);
$color-grey-200: hsl(240 5% 90%);
$color-grey-100: hsl(240 10% 95%);

$color-blue-900: hsl(240 100% 10%);
$color-blue-800: hsl(240 100% 20%);
$color-blue-700: hsl(240 100% 30%);
$color-blue-600: hsl(240 100% 40%);
$color-blue-500: hsl(235 100% 50%);
$color-blue-400: hsl(230 100% 60%);
$color-blue-300: hsl(225 100% 70%);
$color-blue-200: hsl(220 100% 75%);
$color-blue-100: hsl(220 100% 80%);

$color-purple-900: hsl(280 100% 10%);
$color-purple-800: hsl(280 100% 20%);
$color-purple-700: hsl(280 100% 30%);
$color-purple-600: hsl(280 100% 40%);
$color-purple-500: hsl(280 100% 50%);
$color-purple-400: hsl(280 100% 60%);
$color-purple-300: hsl(280 100% 70%);
$color-purple-200: hsl(280 100% 80%);
$color-purple-100: hsl(280 100% 90%);

$color-red-900: hsl(10 100% 10%);
$color-red-800: hsl(10 100% 20%);
$color-red-700: hsl(10 100% 30%);
$color-red-600: hsl(10 100% 40%);
$color-red-500: hsl(10 100% 50%);
$color-red-400: hsl(8 100% 60%);
$color-red-300: hsl(5 100% 70%);
$color-red-200: hsl(0 100% 80%);
$color-red-100: hsl(0 100% 90%);

$shadow-900: rgba(0, 0, 0, .20);
$shadow-500: rgba(0, 0, 0, .15);
$shadow-100: rgba(0, 0, 0, .1);

$colors: [
    (grey-900, $color-grey-900),
    (grey-800, $color-grey-800),
    (grey-700, $color-grey-700),
    (grey-600, $color-grey-600),
    (grey-500, $color-grey-500),
    (grey-400, $color-grey-400),
    (grey-300, $color-grey-300),
    (grey-200, $color-grey-200),
    (grey-100, $color-grey-100),

    (blue-900, $color-blue-900),
    (blue-800, $color-blue-800),
    (blue-700, $color-blue-700),
    (blue-600, $color-blue-600),
    (blue-500, $color-blue-500),
    (blue-400, $color-blue-400),
    (blue-300, $color-blue-300),
    (blue-200, $color-blue-200),
    (blue-100, $color-blue-100),

    (purple-900, $color-purple-900),
    (purple-800, $color-purple-800),
    (purple-700, $color-purple-700),
    (purple-600, $color-purple-600),
    (purple-500, $color-purple-500),
    (purple-400, $color-purple-400),
    (purple-300, $color-purple-300),
    (purple-200, $color-purple-200),
    (purple-100, $color-purple-100),

    (red-900, $color-red-900),
    (red-800, $color-red-800),
    (red-700, $color-red-700),
    (red-600, $color-red-600),
    (red-500, $color-red-500),
    (red-400, $color-red-400),
    (red-300, $color-red-300),
    (red-200, $color-red-200),
    (red-100, $color-red-100),
];

@each $name, $value in $colors {
    .swatch-#{$name} {
        background-color: #{$value};
    }
}

$border-color: $color-grey-600;
$border-shadow: $color-grey-800;
$background-color-light: $color-grey-100;
$background-color-medium: $color-grey-200;
$background-color-dark: $color-grey-300;
$primary-color-light: $color-blue-100;
$primary-color-medium: $color-blue-500;
$primary-color-dark: $color-blue-700;
$accent-color-light: $color-purple-100;
$accent-color-medium: $color-purple-500;
$accent-color-dark: $color-purple-700;

$elevation-recessed: inset 1px 2px 3px $shadow-500, inset 0 1px 2px $shadow-900;
$elevation-low: 1px 2px 3px $shadow-500, 0 1px 2px $shadow-900;
$elevation-medium: 2px 6px 5px $shadow-500, 0 1px 2px $shadow-900;
$elevation-high: 3px 8px 6px $shadow-900, 0 0px 3px $shadow-900;

body {
    background-color: $background-color-medium;
}

.colorset {
    display: flex;
    gap: 4px;
    margin: 16px 0px 16px 0px;
}

.swatch {
    border: 1px solid black;
    border-radius: 5px;
    width: 100px;
    height: 50px;
}

.flex {
    display: flex;
    gap: 8px;
    margin: 16px 0px 16px 0px;
}

.controls {
    padding: 8px;
}

.track-list {
    border: 1px solid black;
    display: flex;
}

.track-list__grouping {
    padding: 8px;
    border-style: solid;
    border-width: 0px 5px 0px 0px;
}

.bulletless-list {
    list-style: none;
}

.playlist-row {
    display: flex;
    margin-top: 32px;
}

.track-list__row {
    margin-top: 32px;
}

.card {
    display: block;
    border-radius: 5px;
    padding: 8px;
    width: 500px;
    height: 100px;
}

.card--recessed {
    border: 1px solid $border-color;
    box-shadow: $elevation-recessed;
}

.card--low {
    border: 1px solid $border-color;
    box-shadow: $elevation-low;
}

.card--medium {
    border: 1px solid $border-color;
    box-shadow: $elevation-medium;
}

.card--high {
    border: 1px solid $border-color;
    box-shadow: $elevation-high;
}

.now-playing {
    display: grid;
    background-color: $background-color-light;
}

.now-playing__name {
    display: block;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    color: $accent-color-dark;
}

.now-playing__length {
    display: block;
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    text-align: right;
    color: $color-blue-300;
}

.now-playing__album {
    display: block;
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    color: $color-grey-800;
}

.now-playing__artist {
    display: block;
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    color: $color-grey-800;
}

.track-card {
    display: grid;
    gap: 4px 4px;
    border: 1px solid $border-color;
    background-color: $background-color-light;
    box-shadow: $elevation-low;
}

.track-card__name {
    display: block;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    color: $primary-color-dark;
}

.track-card__length {
    display: block;
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    text-align: right;
    color: $primary-color-light;
}

.track-card__album {
    display: block;
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    color: $color-grey-800;
}

.track-card__artist {
    display: block;
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    color: $color-grey-800;
}