@use "vars" as v;

:root {
    --title-1-sz: 1.4rem;
    --title-2-sz: 1.3rem;
    --title-3-sz: 1.1rem;
    --title-4-sz: 1.0rem;
    --subtitle-1-sz: 1.6rem;
    --subtitle-2-sz: 1.4rem;
    --subtitle-3-sz: 1.2rem;

    --heading-font-family: default;
    --heading-bg: var(--main-color);
    --heading-fg: var(--text-color);
    --heading-hg-fg: var(--text-color);
    --heading-hg-bg: var(--secondary-color);
    --heading-link-hv-fg: var(--link-fg);

    --cover-w: 10rem;
    --cover-h: 10rem;
    --cover-small-w: 10rem;
    --cover-small-h: 10rem;
    --cover-tiny-w: 10rem;
    --cover-tiny-h: 10rem;

    --card-w: var(--cover-w);
    --preview-bg: var(--body-bg);
    --preview-title-sz: var(--title-4-sz);
    --preview-subtitle-sz: var(--title-4-sz);
    --preview-wide-content-sz: #{v.$text-size-2};
    --preview-heading-bg-color: var(--main-color);
    --header-height: var(--cover-h);

    --a-carousel-p: #{v.$text-size-medium};
    --a-carousel-ml: calc(#{v.$mp-4} - 0.5rem);
    --a-carousel-gap: #{v.$mp-4};
    --a-carousel-nav-x: -#{v.$mp-3e};
    --a-carousel-bg: none; // var(--secondary-color-light);

    --a-progress-bg: transparent;
    --a-progress-bar-bg: var(--secondary-color);
    --a-progress-bar-color: var(--text-color);
    --a-progress-bar-pd: #{v.$mp-2};

    --a-playlist-header-bg: var(--secondary-color);
    --a-playlist-header-fg: var(--text-color);
    --a-playlist-title-sz: #{v.$text-size};
    --a-playlist-title-pd: #{v.$mp-3};
    --a-playlist-item-border: 1px var(--secondary-color) solid;

    --a-sound-bg: var(--main-color);
    --a-sound-hv-bg: var(--main-color);
    --a-sound-hv-fg: var(--secondary-color);
    --a-sound-playing-fg: var(--secondary-color-dark);
    --a-sound-text-sz: #{v.$text-size};

    --a-player-url-fg: var(--text-color);
    --a-player-panel-bg: var(--main-color);
    --a-player-bar-height: var(--nav-primary-height);
    --a-player-bar-bg: var(--main-color);
    --a-player-bar-title-alone-sz: #{v.$text-size-medium};
    --a-player-bar-button-fg: var(--button-fg);
    --a-player-bar-button-fg: var(--button-bg);
    --a-player-bar-button-hv-fg: var(--button-hv-fg);
    --a-player-bar-button-hv-bg: var(--button-hv-bg);

    --button-fg: var(--text-color);
    --button-bg: var(--main-color);
    --button-sec-bg: var(--main-color-light);
    --button-hv-fg: var(--text-color);
    --button-hv-bg: var(--secondary-color-light);
    --button-active-fg: var(--text-color);
    --button-active-bg: var(--secondary-color);
}


@media screen and (max-width: v.$screen-wide) {
    :root {
        --cover-w: 10rem;
        --cover-h: 10rem;
        --cover-small-w: 6rem;
        --cover-small-h: 6rem;
        --cover-tiny-w: 4rem;
        --cover-tiny-h: 4rem;

        --section-content-sz: 1rem;

        // --preview-title-sz: #{v.$text-size};
        // --preview-subtitle-sz: #{v.$text-size-smaller};
        // --preview-wide-content-sz: #{v.$text-size};
    }
}

@media screen and (max-width: v.$screen-wide) {
    :root {
        --cover-w: 8rem;
        --cover-h: 8rem;
        --cover-small-w: 4rem;
        --cover-small-h: 4rem;
        --cover-tiny-w: 2rem;
        --cover-tiny-h: 2rem;

        --section-content-sz: 1rem;

        // --preview-title-sz: #{v.$text-size};
        // --preview-subtitle-sz: #{v.$text-size-smaller};
        // --preview-wide-content-sz: #{v.$text-size};
    }
}

// ---- headings

.no-reset h1 { font-size: var(--title-1-sz); }
.no-reset h2 { font-size: var(--title-2-sz); }
.no-reset h3 { font-size: var(--title-3-sz); }
.no-reset h3 { font-size: var(--title-3-sz); }
.no-reset h4 { font-size: var(--title-4-sz); }
.no-reset h5 { font-size: var(--title-5-sz); }

.title, .header.preview .title {
    &.is-1 { font-size: var(--title-1-sz); }
    &.is-2 { font-size: var(--title-2-sz); }
    &.is-3 { font-size: var(--title-3-sz); }
}

.subtitle, .header.preview .subtitle {
    color: var(--text-color-light);

    &.is-1 { font-size: var(--subtitle-1-sz); }
    &.is-2 { font-size: var(--subtitle-2-sz); }
    &.is-3 { font-size: var(--subtitle-3-sz); }
}

.title + .subtitle {
    padding-top: 0em !important;
}

.headings a, a.heading, a.subtitle {
    text-decoration: none !important;
}

.heading {
    display: inline-block;

    &:not(:empty) {
        // border-bottom: 1px var(--heading-bg) solid;
        // color: var(--heading-fg);
        //padding: v.$mp-2;
        margin-top: 0em !important;
        vertical-align: top;

        &.highlight, &.active,
        .preview.active &,
        {
            // border-color: var(--heading-hg-bg);
            color: var(--heading-hg-fg);
        }
    }
}


// ---- bulma overrides
.modal-card {
    max-width: v.$screen-wide;
}
.modal-card {
    max-height: calc(100% - 10rem);
}

// ---- button
@mixin button {
    .button, a.button, button.button {
        font-size: v.$text-size;
        display: inline-block;
        padding: v.$mp-2e;
        border: none;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        text-decoration: none;

        color: var(--button-fg);
        background-color: var(--button-bg);

        &.square { min-width: 2.5em; }
        &.secondary { background-color: var(--button-sec-bg); }

        .label, label {
            cursor: pointer;
        }

        .icon {
            vertical-align: middle;
            &:not(:only-child) {
                &:first-child { margin: 0 v.$mp-3e 0 v.$mp-1e; }
                &:last-child { margin: 0 v.$mp-3e 0 v.$mp-1e; }
            }
        }

        &:hover {
            color: var(--button-hv-fg);
            background-color: var(--button-hv-bg);
            opacity: 1 !important;
        }

        &.active:not(:hover) {
            color: var(--button-active-fg);
            background-color: var(--button-active-bg);
        }

        &:not([disabled]), &:not(.disabled) {
            cursor: pointer;
        }

        &[disabled], &.disabled {
            background-color: var(--text-color-light);
            color: var(--secondary-color);
            border-color: var(--secondary-color-light);
        }

        .dropdown-trigger {
            border-radius: 1.5em;
        }
    }


    .button-group, .nav {
        .button {
            border-radius: 0px;
            background-color: transparent;
            border-top: 0px;
            border-bottom: 0px;
            height: 100%;

            &:not(:first-child) { border-left: 0px; }
            &:last-child { border-right: 0px; }
        }
    }

    .button-group + .button-group {
        border-left: 1px solid var(--text-color-light);
    }
}


// ---- preview
.preview {
    position: relative;
    background-size: cover;
    background-color: var(--preview-bg) !important;

    &.preview-item {
        width: 100%;
    }

    // FIXME: remove
    &.columns, .headings.columns {
        margin-left: 0em;
        margin-right: 0em;
        .column { padding: 0em; }
    }

    .title, .title:not(:last-child) {
        // second is bulma reset
        font-weight: v.$weight-bold;
        font-size: var(--preview-title-sz);
        margin-bottom: unset;
    }
    .subtitle {
        font-weight: v.$weight-bolder;
        font-size: var(--preview-subtitle-sz);
        margin-bottom: unset;
    }
    //.content, .actions {
    //    font-size: v.$text-size-bigger;
    //}

    .headings {
        background-size: cover;

        > * { margin: 0em; }
        .column { padding: 0em; }

        a { color: var(--text-color); }
        a:hover { color: var(--heading-link-hv-fg) !important; }
    }

    &.tiny {
        .title { font-size: calc(var(--preview-title-sz) * 0.8); }
        .subtitle { font-size: calc(var(--preview-subtitle-sz) * 0.8); }
        .content {
            font-size: v.$text-size;
            max-height: 3rem;
            overflow: hidden;
        }
    }

}


.preview-cover {
    background: var(--preview-bg);
    background-size: cover;
    background-repeat: no-repeat;
    height: var(--cover-h);
    max-width: calc( var(--cover-w) * 1.5 );
    min-width: var(--cover-w);
    overflow: hidden;
    border: 1px #c4c4c4 solid;

    img {
        height: var(--cover-h);
        max-width: calc( var(--cover-w) * 1.5 );
        min-width: var(--cover-w);
    }
    img.hide { visibility: hidden; }


    &.small, .preview.small & {
        min-width: unset;
        height: var(--cover-small-h);
        width: var(--cover-small-w) !important;
        min-width: var(--cover-small-w);
    }

    &.tiny, .preview.tiny & {
        min-width: unset;
        height: var(--cover-tiny-h);
        width: var(--cover-tiny-w) !important;
        min-width: var(--cover-tiny-w);
    }
}

.preview-header {
    // width: 100%;

    /*&:not(.no-cover) {
        min-height: var(--header-height);
    }*/

    &.no-cover {
        height: unset;
    }

    .headings {
        padding-top: v.$mp-6;
    }

    .headings, > .container {
        width: 100%;
    }

    > .container, {
        height: 100%;
    }
}


// ---- list
.list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    // padding: v.$mp-3;

    .headings {
        display: flex;
        flex-direction: row;
        padding: 0em;
        margin-bottom: v.$mp-2 !important;

        .heading {
            // background-color: var(--preview-heading-bg-color);
            padding: 0rem;
        }

    }

    .title { flex-grow: 1; }
    .subtitle {
        font-size: var(--preview-title-sz);
        // background-color: var(--preview-heading-bg-color);
        text-align: right;

        &:not(:empty) { min-width: 9rem; }
    }

    .media-content {
        height: 100%;
        margin-bottom: unset;

        .list-item:not(.no-cover) & {
            min-height: var(--cover-small-h);
        }
    }

    .actions {
        text-align: right;
        align-items: center;
    }

    &:not(.wide) .media {
        padding: v.$mp-3;
        // border-radius: v.$mp-2;
        border: 1px solid var(--break-color) !important;
    }
}

@media screen and (max-width: v.$screen-very-small) {
    .list-item .headings {
        flex-direction: column;

        .heading {
            display: inline;
            text-align: left;
        }

        .subtitle {
            color: unset !important;
            background: none !important;
        }
    }
}


// ---- wide
.list-item.wide {
    & .preview-cover {
        box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
    }

    & .content {
        font-size: var(--preview-wide-content-sz);
        flex-grow: 1;
    }
}


// ---- card
.preview-card {
    display: flex;
    flex-direction: column;
    width: var(--card-w);
    padding: 0rem !important;
    margin-bottom: auto;

    background-color: var(--preview-bg) !important;
    transition: box-shadow 0.2s;

    &:hover {
        figure {
            // box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
            box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
        }

        a {
            color: var(--heading-link-hv-fg);
        }
    }

    .headings {
        margin-top: v.$mp-2;

        .heading {
            display: block !important;
        }

        .subtitle {
            font-size: v.$text-size-2;
        }
    }

    .card-content {
        flex-grow: 1;
        position: relative;

        figure {
            // box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
            height: var(--cover-h);
            width: var(--cover-w);
        }

        .actions {
            position: absolute;
            padding: v.$mp-2;
            bottom: 0rem;
            right: 0rem;
        }

    }
}


// ---- ---- Carousel
.a-carousel {
    .a-carousel-viewport {
        box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
        // background-color: var(--a-carousel-bg);
        padding: 0rem;
        padding-top: var(--a-carousel-p);
        margin-top: calc( 0rem - var(--a-carousel-p) );
    }
}

.a-carousel-container {
    width: 100%;
    gap: var(--a-carousel-gap);
    transition: margin-left 1s;

    > * {
        flex-shrink: 0;
    }
}

.a-carousel-bullets-container {
    // due to a-carousel margin-left
    padding-left: var(--a-carousel-ml);

    .bullet {
        margin: v.$mp-1;
        cursor: pointer;

        &:hover { color: var(--link-fg); }
    }
}


// ---- ---- progress bar
.a-progress {
    display: flex;
    flex-direction: row;
    margin: 0em;
    padding: 0em;

    &:hover {
        background-color: var(--a-progress-bg);
    }

    .a-progress-bar-container {
        flex-grow: 1;
        margin: 0em;
    }

    > time, .a-progress-bar {
        height: 100%;
        padding: var(--a-progress-bar-pd);
    }

    .a-progress-bar {
        background-color: var(--a-progress-bar-bg);
        color: var(--a-progress-bar-color)
    }
}


// ---- ---- player
// ---- playlist
.playlist, .a-playlist {
    .header {
        display: flex;
        flex-direction: row;

        .title, .button {
            background-color: var(--a-playlist-header-bg);
            color: var(--a-playlist-header-fg);
        }

        .title {
            font-size: var(--a-playlist-title-sz);
            margin: 0;
            padding: var(--a-playlist-title-pd);
        }
    }

    li {
        list-style: none;
        border-bottom: var(--a-playlist-item-border);

        &:last-child {
            border-bottom: 0px;
        }
    }
}

// ---- sound item
.a-sound-item {
    display: flex;
    align-items: center;
    flex-direction: row;

    height: 3rem;
    background-color: var(--a-sound-bg);

    &.playing .label {
        color: var(--a-sound-playing-fg) !important;
    }

    &:hover {
        background-color: var(--a-sound-hv-bg);

        .label {
            color: var(--a-sound-hv-fg) !important;
        }
    }

    .label:hover::before, &.playing .label::before {
        content: "\f04b";
        font-family: "Font Awesome 6 Free";
        margin-right: v.$mp-3e;
    }
    &.playing .label:hover::before {
        content: '';
        margin: 0;
    }


    .headings > * {
    }

    .label {
        cursor: pointer;

        .icon {
            padding: 0em v.$mp-3;
        }

        margin: 0em !important;
        padding: v.$mp-3e;
        font-size: var(--a-sound-text-sz);
        font-family: var(--heading-font-family);
    }

    .button {
        width: 3em;
        font-size: var(--a-sound-text-sz);

        &:hover {
            color: var(--a-sound-hv-fg) !important;
            background-color: unset;
        }
    }
}


// ---- player
.player-container {
    z-index: 1000000;
}

.a-player {
    box-shadow: 0em -0.5em 0.5em rgba(0, 0, 0, 0.05);

    a { color: var(--a-player-url-fg); }
    .button {
        color: var(--text-black);
        &:hover { color: var(--button-fg); }
    }
}

.a-player-panels {
    background: var(--a-player-panel-bg);
    height: 0%;
    transition: height 1s;
}
.a-player-panels.is-open {
    height: auto;
}

.a-player-panel {
    padding-bottom: v.$mp-3;
    max-height: 80%;
    overflow-y: auto;

    .a-sound-item:not(:hover) {
        background-color: transparent;
    }
}

.a-player-progress {
    height: 0.4em;
    overflow: hidden;

    time { display: none; }

    &:hover, .a-player-panels.is-open + & {
        background: var(--a-player-bar-bg);
        height: 2em;
        time { display: unset; }
    }
}

.a-player-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: var(--a-player-bar-height);

    border-top: 1px v.$grey-light solid;
    background: var(--a-player-bar-bg);

    > * { height: 100%; }

    .cover { height: 100%; }
    .title {
        font-size: v.$text-size;
        margin: 0em;

        &:last-child {
            font-size: var(--a-player-bar-title-alone-sz);
        }
    }

    .button {
        font-size: v.$text-size-medium;
        height: 100%;
        padding: v.$mp-2 !important;
        min-width: calc(var(--a-player-bar-height) + v.$mp-2 * 2);
        border-radius: 0px;

        &.open {
            background-color: var(--button-active-bg);
            color: var(--button-active-fg);
        }
    }
}

    .a-player-bar-content {
        display: flex;
        flex-direction: vertical;
        align-items: center;
        flex-grow: 1;
        padding: 0 v.$mp-3;
        border-right: 1px black solid;

        .title {
            max-height: calc( var(--a-player-bar-height) - v.$mp-3 );
            overflow: hidden;
        }
    }


/// ---- playlist editor
.a-tracklist-editor {
    .dropdown {
        display: unset !important;
    }
}

/// ----------------
.a-select-file {
    > *:not(:last-child) {
        margin-bottom: v.$mp-3;
    }

    .upload-preview {
        max-width: 100%;
    }

    .a-select-file-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: v.$mp-3;
    }

    .file-preview {
        width: 100%;
        overflow: hidden;

        &:hover {
            box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
        }

        &.active {
            box-shadow: 0em 0em 1em rgba(0,0,0,0.4);
        }

        img {
            width: 100%;
            max-height: 10rem;
        }
    }
}