$navbar-background-color: #000;
$navbar-item-color: #eee;
$navbar-item-hover-color: #000;
//$navbar-tab-active-color: #eee;
//$navbar-dropdown-item-active-color: #eee;

@import "bulma";

body {
    >nav {
        @extend .navbar;
        //@extend .is-black;

        li {
            //@extend .navbar-item;
            display: flex;

            * {
                //@extend .has-text-light;
                @extend .navbar-item;
                display: flex;
                width: 100%;
            }

            // a {
            //     @extend .navbar-item;
            //     display: flex;
            // }
        }

        .navbar-menu {
            @extend .is-active;
            //@extend .is-black;
        }

        .navbar-brand {
            font-weight: bolder;

            li {
                @extend .title;
                margin: 0px !important;
                padding-top: 0px;
                padding-bottom: 0px;
            }

            img {
                max-height: 48px;
            }
        }
    }

    >header, >main, >footer {
        @extend .section;
    }

    >header {
        h1 {
            @extend .title;
            @extend .is-1;
        }

        p {
            @extend .subtitle;
            @extend .is-3;
        }
    }

    >footer {
        @extend .content;
    }
}

.cards {
    @extend .columns;
    @extend .is-multiline;
    @extend .is-8;

    > * {
        @extend .column;
        @extend .is-half-tablet;
        @extend .is-one-third-desktop;
        @extend .is-one-quarter-widescreen;
        @extend .is-one-fifth-fullhd;
        @extend .card;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: calc(#{$gap} / 2);

        @media (min-width: $tablet) {
            width: calc(50% - #{$gap});
        }

        @media (min-width: $desktop) {
            width: calc(33.3333% - #{$gap});
        }

        @media (min-width: $widescreen) {
            width: calc(25% - #{$gap});
        }

        @media (min-width: $fullhd) {
            width: calc(20% - #{$gap});
        }

        >header {
            flex: 1;
            @extend .card-content;

            >h2 {
                @extend .title;
                @extend .is-full;

                >.tag {
                    position: absolute;
                    top: 0.5em;
                    right: 0.5em;
                }
            }

            >p {
                @extend .subtitle;
            }
        }

        >section {
            @extend .card-content;
            @extend .py-0;
            @extend .my-0;
            @extend .level;
            @extend .is-mobile;
            flex: none;
            align-items: first baseline;

            >* {
                @extend .level-right;
                @extend .my-0;
                vertical-align: top;
                flex-shrink: 1;

                * {
                    text-align: right;
                }
            }

            >h3 {
                @extend .level-left;
                @extend .title;
                @extend .is-6;
                @extend .my-0;
                @extend .mr-2;
                flex-shrink: 0;
            }
        }

        >footer {
            @extend .card-footer;
            flex: none;

            >* {
                @extend .card-footer-item;
            }
        }
    }
}

.has-addons {
    flex-wrap: wrap;

    .help {
        flex-basis: 100%;
    }
}

.feather-icon {
    @extend .icon;
    margin-right: 0 !important;

    >svg {
        width: 1em;
        height: 1em;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }
}

.tile {
    flex-grow: 0;
}

.tile.is-main {
    flex-grow: 1;
}

.help {
    border-radius: 4px;
    padding: calc(0.5em - 1px) 1em calc(0.5em - 1px) 1em;
}

.help.is-warning {
    color: #000000;
    background-color: #ffdd57;
    border-radius: 4px;
}

.help.is-danger {
    color: #ffffff;
    background-color: #f14668;
    border-radius: 4px;
}