@charset "utf-8";
@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/sass/components/dropdown.sass";

$body-background-color: $light;

@import "~buefy/src/scss/components/_autocomplete.scss";
@import "~bulma";

//-- helpers/modifiers
.is-fullwidth { width: 100%; }
.is-fixed-bottom {
    position: fixed;
    bottom: 0;
    margin-bottom: 0px;
    border-radius: 0;
}
.is-borderless { border: none; }

.has-text-nowrap {
    white-space: nowrap;
}

.has-background-transparent {
    background-color: transparent;
}

.is-opacity-light {
    opacity: 0.7;
    &:hover {
        opacity: 1;
    }
}

//-- navbar
.navbar + .container {
    margin-top: 1em;
}

.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
    box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
}

a.navbar-item.is-active {
    border-bottom: 1px grey solid;
}

.navbar {
    .navbar-dropdown {
        z-index: 2000;
    }

    .navbar-split {
        margin: 0.2em 0em;
        margin-right: 1em;
        padding-right: 1em;
        border-right: 1px $grey-light solid;
        display: inline-block;
    }

    form {
        margin: 0em;
        padding: 0em;
    }

    &.toolbar {
        margin: 1em 0em;
        background-color: transparent;
        margin-bottom: 1em;

        .title {
            padding-right: 2em;
            margin-right: 1em;
            border-right: 1px $grey-light solid;

            font-size: $size-5;
            color: $text-light;
            font-weight: $weight-light;
        }
    }
}

//-- cards
.card {
    .title {
        a {
            color: $dark;
        }

        padding: 0.2em;
        font-size: $size-5;
        font-weight: $weight-medium;
    }

    &.is-primary {
        box-shadow: 0em 0em 0.5em $black
    }
}

.card-super-title {
    position: absolute;
    z-index: 1000;
    font-size: $size-6;
    font-weight: $weight-bold;
    padding: 0.2em;
    top: 1em;
    background-color: $white;

    .fas {
        padding: 0.1em;
        font-size: 0.8em;
    }
}


//-- page
.page {
    & > .cover {
        float: right;
        max-width: 45%;
    }

    .header {
        margin-bottom: 1.5em;
    }

    .headline {
        font-size: 1.4em;
        padding: 0.2em 0em;
    }

    p { padding: 0.4em 0em; }
    hr { background-color: $grey-light; }

    section {
        h1 { font-size: $size-1; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h2 { font-size: $size-3; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h3 { font-size: $size-4; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h4 { font-size: $size-5; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
        h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
    }
}


.media.item .headline {
    line-height: 1.2em;
    max-height: calc(1.2em * 3);
    overflow: hidden;

    & + .headline-overflow {
        position: relative;
        width: 100%;
        height: 2em;
        margin-top: -2em;
    }

    & + .headline-overflow:before {
        content:'';
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        bottom:0;
        background:linear-gradient(transparent 1em, $body-background-color);
    }
}



//-- player
.player {
    box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);

    .player-panel {
        margin: 0.4em;
        max-height: 80%;
        overflow-y: auto;
    }

    .player-bar {
        border-top: 1px $grey-light solid;

        > .media-left:not(:last-child) {
            margin-right: 0em;
        }

        > .media-cover {
            border-left: 1px black solid;
        }

        .cover {
            font-size: 1.5rem !important;
            height: 2.5em !important;
        }

        > .media-content {
            padding-top: 0.4em;
            padding-left: 0.4em;
        }

        .button {
            font-size: 1.5rem !important;
            height: 2.5em;
            min-width: 2.5em;
            border-radius: 0px;
        }

        .title {
            margin: 0em;
        }
    }

}

//-- media
.media {
    .subtitle {
        margin-bottom: 0.4em;
    }
    .media-content .headline {
        font-size: 1em;
        font-weight: 400;
    }
}

//-- general
body {
    background-color: $body-background-color;
}

section > .toolbar {
    background-color: rgba(0,0,0,0.05);
    padding: 1em;
    margin-bottom: 1.5em;
}


main {
    .cover {
        margin: 1em 0em;
        border: 0.2em black solid;
    }

    .small-cover {
        width: 10em;
    }
}

aside {
    & > section {
        margin-bottom: 2em;
    }

    .cover {
        margin-bottom: 2em;
    }

    .small-cover {
        width: 4em;
    }

    .media .subtitle {
        font-size: 1em;
    }
}