@import url("./main.css");
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');

:root {
    --min-card-size: min(60ch, calc(100vw - var(--pad-main)));
    --rating-color: gold;
}

main {
    & > :is(header, section, footer) {
        background-color: var(--fg-color);
        padding: var(--pad-datasets-block) var(--pad-datasets-inline);
        position: relative;
    }
    
    & > :first-child {
        border-radius: var(--corner-radius) var(--corner-radius) 0 0;
        margin-top: var(--pad-main);
    }

    & > :last-child {
        border-radius: 0 0 var(--corner-radius) var(--corner-radius);
        margin-bottom: var(--pad-main);
    }

    & > :not(:last-child):is(header, section)::after {
        content: '';
        position: absolute;
        inset-inline: calc(var(--pad-datasets-inline) - var(--gap-small));
        bottom: 0;
        border-bottom: 3px solid var(--bg-color);
        opacity: .25;
        transform: translateY(50%);
        z-index: 1;
    }
}

header {
    margin-inline: 0;
    display: grid;
    grid-template-columns: 1fr 1fr max-content;
    align-items: center;
    grid-gap: var(--gap-medium);
}

#title {
    grid-column: 1 / 3;
    margin-block: var(--gap-medium) 0;
    text-align: center;

    &::after {
        content: attr(data-type);
        background-color: var(--accent-color);
        font-size: .5em;
        font-weight: initial;
        position: relative;
        bottom: .25lh;
        margin-inline: var(--gap-small);
        padding: 2pt 4pt;
        border-radius: 4pt;
    }

    &[data-type="dataset"]::after {
        content: "Dataset";
    }

    &[data-type="api"]::after {
        content: "API";
    }
}

:has(#rating), #url {
    text-align: start;
    grid-column: 1 / 3;
}

#rating {
    color: color-mix(in oklab, var(--text-color) 80%, black);
}

#rating::after {
    content: "";
    display: inline-block;
    width: 5em;
    height: 1lh;
    vertical-align: bottom;
    margin-inline: .5ch;
    mask-image: url("stars.svg");
    -webkit-mask-image: url("stars.svg");
    mask-size: 100% 100%;
    mask-mode: alpha;
    --rating-percent: calc((var(--rating, 0) / 5) * 100%);
    background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
}

a {
    --text-color: var(--accent-color);

    /*
        Why doesn't it do this automatically? It is inherited from body,
        so I should be able to just change --text-color, right?
    */
    color: var(--text-color); 
}

#terms-of-use {
    /* text-align: end; */
}

.upvote {
    margin: var(--gap-medium) 0;
    align-self: self-start;
    grid-column: 3;
    grid-row: 1 / 4;
}

#metadata {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--gap-large);
}

#full-description {
    text-wrap: balance;
    text-wrap: pretty;
    margin-top: 0;

    br {
        margin-bottom: .5lh;
    }
}

.skeleton {
    font-family: "Flow Circular";
    font-weight: 400;
    font-style: normal;
    user-select: none;
    --rating-color: var(--text-color);
    
    a, .btn {
        pointer-events: none;
    }
    
    & > * {
        cursor: progress;
    }
    
    @media screen and not (prefers-reduced-motion) {
        :is(header, section) > :is(p, span, h1, a) {
            animation: infinite 2s linear skeleton-loading;
            background: radial-gradient(
                circle farthest-side,
                var(--highlight-color, white) 20%,
                var(--text-color) 40%
                ) no-repeat, var(--text-color);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
                
            &:is(a) {
                --highlight-color: color-mix(in oklab, white, var(--text-color));
            }
        }
    }

    #title::after {
        color: color-mix(in oklab, var(--accent-color) 50%, currentcolor);
    }
}

@keyframes skeleton-loading {
    from {
        background-position-x: calc(-1.4 * var(--min-card-size)), 0;
    }

    to {
        background-position-x: calc(1.4 * var(--min-card-size)), 0;
    }
}