@charset "utf-8";

@use "~bulma/sass" with (
    $family-sans-serif: '"Dubai W23", "Inter", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif',
);

@import '@fontsource/inter/100.css';
@import '@fontsource/inter/200.css';
@import '@fontsource/inter/300.css';
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/inter/700.css';
@import '@fontsource/inter/800.css';
@import '@fontsource/inter/900.css';
@import './dubai-font.css';

@import "~@fortawesome/fontawesome-free/css/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

@view-transition {
    navigation: auto;
}

.navbar-item {
    border-radius: var(--bulma-radius);
}

.view {

    // codeblocks border radius
    pre:has(>code) {
        border-radius: 0.5em;
    }

    p>img:only-child{
        display: block;
        margin-right: auto;
        margin-left: auto;
        view-transition-name: banner-image;
    }
    @for $i from 1 through 6 {
        h#{$i} {
            border-bottom: var(--bulma-hr-height) solid var(--bulma-hr-background-color);
            padding-bottom: 0.5em;
        }
        h#{$i}:before {
            color: var(--bulma-grey-light);
        }
    }
    audio {
        width: 100%;
    }
    a[href^="http"]::after{
        display: inline-block;
        content: "\f08e";
        font-weight: 900;
        font-family: "Font Awesome 6 Free";
        font-size: 0.6em;
        margin: 0 0.4em;
    }
    &>p:first-of-type img:only-child {
        border-radius: 0.5em;
        object-fit: cover;
        object-position: 0 50%;
        max-height: 20em;
        width: 100%;
        transition: max-height 0.5s;
    }

    counter-reset:h1;
    @for $i from 1 through 6 {
        h#{$i} {
            counter-reset:h#{$i+1};
            font-size: 1em;
            font-weight: bold;
            margin: 3em 0 2em 0 !important;
        }
    }
    h1:before {
        counter-increment:h1;
        content:counter(h1) ". ";
    }
    h2:before {
        counter-increment:h2;
        content:counter(h1) "." counter(h2) ". ";
    }
    h3:before {
        counter-increment:h3;
        content:counter(h1) "." counter(h2) "." counter(h3) ". ";
    }
    h4:before {
        counter-increment:h4;
        content:counter(h1) "." counter(h2) "." counter(h3)  "." counter(h4) ". ";
    }
    h5:before {
        counter-increment:h5;
        content:counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
    }
    h6:before {
        counter-increment:h6;
        content:counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5)  "." counter(h6) ". ";
    }

    li:has(>input[type="checkbox"]) {
        list-style: none;
    }

    input[type="checkbox"] {
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        /* Remove most all native input styles */
        appearance: none;
        /* For iOS < 15 */
        background-color: var(--form-background);
        /* Not removed via appearance */
        margin: 0 0.3em 0 0;

        font: inherit;
        color: currentColor;
        width: 1.3em;
        height: 1.3em;
        border: 0.15em solid currentColor;
        border-radius: 0.15em;
        transform: translateY(-0.075em);

        display: inline-grid;
        place-content: center;

        &::before {
            content: "";
            width: 0.65em;
            height: 0.65em;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
            transform: scale(0);
            transform-origin: bottom left;
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em #888;
            /* Windows High Contrast Mode */
            background-color: CanvasText;
        }
        &:checked::before {
            transform: scale(1);
        }
        &:focus {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }
    }
}

*:hover>.show-on-parent-hover {
    display: inline !important;
}
