@import './css/reset.css';
@import './css/variables.css';
@import './css/fonts.css';
@import './css/icons.css';

@keyframes fadeIn {
    from {
        opacity: 0;
        scale: 0.95;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes spin {
    0% {
        opacity: 1;
        rotate: 0deg;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        rotate: 360deg;
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--level-6);
    background: color-mix(
        in oklab,
        var(--clr-primary-a0) 5%,
        var(--clr-surface-a0)
    );
    color: var(--clr-light-a0);
}

:focus-visible {
    outline: 2px solid var(--clr-primary-a20) !important;
    outline-offset: 2px !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: rgba(255 255 255 / 0);
}

pre {
    font-size: var(--level-7);
}

p {
    margin-block: 1.5em;

    &:last-child {
        margin-bottom: 0;
    }

    &:first-child {
        margin-top: 0;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    margin-top: 0;
    margin-bottom: min(1em, 2rem);

    &:last-child {
        margin-bottom: 0;
    }
}

h1,
.is--level-1 {
    font-size: var(--level-1);
    line-height: 1;
    letter-spacing: -0.05em;
}

h2,
.is--level-2 {
    font-size: var(--level-2);
    line-height: 1;
}

h3,
.is--level-3 {
    font-size: var(--level-3);
    line-height: 1.15;
}

h4,
.is--level-4 {
    font-size: var(--level-4);
    line-height: 1.15;
}

h5,
.is--level-5 {
    font-size: var(--level-5);
    line-height: 1.3;
}

h6,
.is--level-6 {
    font-size: var(--level-6);
    line-height: 1.3;
}

picture {
    img {
        display: block;
        width: 100%;
        height: auto;
    }
}

kbd {
    background-color: transparent;
    color: var(--clr-light-a0);
    border-radius: var(--space-3xs);
    border: 1px solid var(--clr-light-a0);
    cursor: default;
    font-size: var(--level-8);
    line-height: 1;
    text-align: center;
    padding: var(--space-3xs);
    top: -1px;
}

.is--loading {
    position: relative;
    min-height: var(--space-l);

    &::before {
        content: '';
        display: flex;
        width: var(--space-l);
        aspect-ratio: 1;
        background-color: var(--clr-primary-a10);
        mask: url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNMTIgMjJDMTcuNTIyOCAyMiAyMiAxNy41MjI4IDIyIDEySDE5QzE5IDE1Ljg2NiAxNS44NjYgMTkgMTIgMTlWMjJaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGgKICAgIGQ9Ik0yIDEyQzIgNi40NzcxNSA2LjQ3NzE1IDIgMTIgMlY1QzguMTM0MDEgNSA1IDguMTM0MDEgNSAxMkgyWiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgo8L3N2Zz4=')
            no-repeat center / contain;
        animation: spin 1s linear infinite,
            fadeIn var(--transition-duration) var(--transition-timing-function)
                forwards;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }
}

.is--centered {
    text-align: center;
}

.box {
    padding-block: var(--space-s);
    margin-bottom: var(--space-m);
}

form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--space-l);

    &:last-child {
        margin-bottom: 0;
    }

    &.is--search {
        padding-block: var(--space-s);
        position: sticky;
        flex-direction: row;
        flex-wrap: wrap;
        top: 0;
        z-index: 1;
        background-color: rgb(0 0 0 / 0.01);
        backdrop-filter: blur(var(--space-l));
        margin-inline: calc((100vw - var(--section-width)) / 2 * -1);

        .cobalt-form-item {
            width: min(30rem, 90vw);
            margin-inline: auto;

            input {
                text-align: center;
            }
        }
    }
}

section {
    max-width: var(--section-width);
    margin-inline: auto;
    padding: var(--section-padding) 0;
}

#results {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

article {
    &.result-item {
        display: grid;
        grid-template-areas:
            'image title rating'
            'image artists rating';
        grid-template-columns: var(--space-2xl) 1fr auto;
        gap: var(--space-2xs) var(--space-m);
        padding: var(--space-2xs);
        border-radius: var(--space-xs);
        background-color: var(--clr-surface-a10);
        border: 1px solid rgb(from var(--clr-surface-a20) r g b / 0.8);
        animation: fadeIn var(--transition-duration)
            var(--transition-timing-function) forwards;
        transition: var(--transition);
        cursor: pointer;

        @media (width < 400px) {
            gap: var(--space-3xs) var(--space-s);
        }

        @media (hover: hover) {
            &:hover {
                border-color: var(--clr-primary-a10);
                background-color: var(--clr-surface-tonal-a10);
            }
        }

        @media (pointer: coarse) {
            &:active {
                scale: 0.95;
                background-color: var(--clr-surface-tonal-a10);
            }
        }

        h2 {
            display: flex;
            align-items: baseline;
            gap: var(--space-2xs);
            grid-area: title;
            font-size: var(--level-5);
            margin: 0;
            align-self: end;
        }

        .result-item-line {
            &.is--image {
                position: relative;
                grid-area: image;
                width: 100%;
                height: auto;
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: var(--space-2xs);
                overflow: clip;
                display: flex;
                align-items: center;
                justify-content: center;

                &::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                    border-radius: var(--space-2xs);
                    background-color: var(--clr-surface-a20);
                    transition: var(--transition);
                }

                @media (hover: hover) {
                    :is(.result-item:hover) & {
                        background-color: var(--clr-surface-tonal-a20);
                    }
                }

                .cobalt-icon {
                    --ggs: 0.75;

                    color: var(--clr-surface-a30);
                }
            }

            &.is--year {
                font-family: var(--font-body);
                font-size: var(--level-6);
                font-weight: 600;
                color: var(--clr-surface-a30);
            }

            &.is--artists {
                grid-area: artists;
                list-style: none;
                font-weight: 600;
                padding: 0;
                margin: 0;
                display: flex;
                gap: var(--space-2xs);

                li.artist-item {
                    display: flex;
                    gap: var(--space-2xs);
                    color: var(--clr-primary-a30);

                    &:not(:last-child) {
                        &::after {
                            content: '·';
                        }
                    }
                }
            }

            &.is--rating {
                grid-area: rating;
                align-self: center;
                display: flex;
                align-items: start;
                gap: var(--space-3xs);
                padding: var(--space-xs) var(--space-s);
                border-radius: var(--space-2xs);

                @media (width < 400px) {
                    padding: var(--space-2xs);
                }

                &:not(.is--not-rated) {
                    &::after {
                        content: '/';
                        font-size: var(--level-5);
                        color: var(--clr-primary-a50);
                        margin-top: var(--space-3xs);
                        opacity: 0.6;
                    }
                }

                .rating {
                    font-weight: 700;

                    &.is--user {
                        font-size: var(--level-3);
                        order: -1;
                    }

                    &.is--max {
                        font-size: var(--level-5);
                        color: var(--clr-primary-a50);
                        margin-top: var(--space-3xs);
                        opacity: 0.6;
                        order: 1;
                    }

                    &.is--no-rating {
                        font-size: var(--level-7);
                        color: var(--clr-primary-a50);
                        opacity: 0.6;
                    }
                }
            }
        }
    }

    &.release-group-details {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);

        header {
            display: flex;
            flex-direction: column;
            gap: var(--space-3xs);

            > * {
                margin: 0;
            }
        }

        .release-group-data {
            &.is--image {
                order: -1;
                margin: calc(var(--space-m) * -1);
                margin-bottom: 0;
                width: calc(100% + (var(--space-m) * 2));
                height: auto;
                aspect-ratio: 1;
                object-fit: cover;
            }

            &.is--year {
                font-family: var(--font-body);
                font-size: var(--level-6);
                font-weight: 600;
                color: var(--clr-primary-a30);
                margin-left: var(--space-2xs);
            }

            &.is--artists {
                list-style: none;
                font-weight: 600;
                padding: 0;
                margin: 0;
                display: flex;
                gap: var(--space-2xs);

                li.artist-item {
                    display: flex;
                    gap: var(--space-2xs);

                    &:not(:last-child) {
                        &::after {
                            content: '·';
                        }
                    }
                }
            }

            &.is--tracklist {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: var(--space-3xs);

                li.track-item {
                    display: grid;
                    grid-template-columns: minmax(0, 3ch) minmax(0, 3fr) minmax(
                            0,
                            1fr
                        );

                    .track-item-line {
                        display: flex;
                        align-items: center;
                        gap: var(--space-3xs);

                        &.is--number {
                            font-weight: 600;
                            color: var(--clr-primary-a10);
                        }

                        &.is--duration {
                            font-size: var(--level-7);
                            text-align: right;
                            color: var(--clr-surface-a30);
                            justify-content: end;

                            .cobalt-icon {
                                --ggs: 0.5;

                                margin-top: calc(var(--space-3xs) / 2);
                            }
                        }
                    }
                }
            }

            &.is--rating {
                position: absolute;
                inset: 0 0 auto 0;
                width: 100%;
                aspect-ratio: 1;
                display: flex;
                align-items: end;
                justify-content: end;
                gap: var(--space-3xs);
                padding: var(--space-m);
                background: linear-gradient(
                    to bottom,
                    transparent 40%,
                    color-mix(in srgb, var(--clr-dark-a0) 80%, transparent)
                );

                &:not(.is--not-rated) {
                    &::after {
                        content: '/';
                        font-size: var(--level-3);
                    }
                }

                .rating {
                    font-weight: 700;
                    font-size: var(--level-3);

                    &.is--user {
                        order: -1;
                    }

                    &.is--max {
                        order: 1;
                    }

                    &.is--no-rating {
                        font-size: var(--level-6);
                    }
                }
            }
        }
    }
}

#release-group-details {
    max-width: min(30rem, 90vw);
    min-height: min(20rem, 50vh);
}