@import "variable";

// Bootstrap
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

@import "alert";
@import "button";
@import "card";
@import "nav";
@import "navbar";
@import "progress";
@import "dropdown";
@import "ui";
@import "form";
@import "editor";

@import "auth";

// Dark mode
@function light-dark($light, $dark) {
    @return var(--light, #{$light}) var(--dark, #{$dark});
}

span {
    svg {
        vertical-align: -2px;
    }
}

:root {
    --ON: initial;
    --OFF: ;

    --text: #{light-dark($body-color, $gray-100)};
    --text-inverse: #{light-dark($gray-100, $body-color)};
    --text-hover: #{light-dark(lighten($body-color, 20), darken($gray-100, 25))};

    --nav-bg: #{light-dark(darken($light, 4.5), darken($dark, 6.5))};
    --nav-bg-acrylic: #{light-dark(rgba(darken($light, 6), 0.75), rgba(darken($dark, 6), 0.75))};
    --nav-border-color: #{light-dark(darken($light, 12), darken($dark, 9))};
    --nav-mobile-bg: #{light-dark($light, $dark)};
    --nav-color-label: #{light-dark(lighten($body-color, 35), lighten($gray-100, 35))};
    --nav-search-bg: #{light-dark(#fff, darken($dark, 4))};

    --bs-border-color: var(--nav-border-color);

    --nav-item-hover: #{light-dark(darken($light, 9), darken($dark, 3))};
    --nav-bar-item-hover: #{light-dark(darken($light, 3), darken($dark, 3))};

    --main-bg: #{light-dark(darken($light, 2), darken($dark, 4))};
    --main-bg-acrylic: #{light-dark(rgba(darken($light, 2), 0.75), rgba(darken($dark, 4), 0.75))};
    --main-border-color: #{light-dark(darken($light, 10), darken($dark, 8))};
    --table-border-color: #{light-dark(darken($light, 14), lighten($dark, 8))};

    --timeline-bg-nth: #{light-dark(darken($light, 6), $dark)};
    --timeline-bg-hover: #{light-dark(darken($light, 8), lighten($dark, 4))};

    --card-bg: #{light-dark($light, $dark)};
    --card-bg-hover: #{light-dark(darken($light, 3), lighten($dark, 4))};

    --card-add-bg-hover: #{light-dark(rgba(darken($light, 5), 0.5), rgba(darken($dark, 5), 0.5))};
    --card-add-border: #{light-dark(darken($light, 10), darken($dark, 7))};
    --card-add-border-hover: #{light-dark(darken($light, 13), darken($dark, 9))};

    --dropdown-bg: #{light-dark($light, lighten($dark, 3))};
    --dropdown-bg-hover: #{light-dark(darken($light, 3), darken($dark, 1))};

    --form-disabled-bg: #{light-dark($light, transparent)};
    --checkbox-bg: #{light-dark(#fff, darken($dark, 6))};
    --checkbox-disabled-bg: #{light-dark(#eee, darken($dark, 2))};
    --switch-bg-image: #{light-dark(
            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"),
            url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")
        )};

    --btn-transparent-bg-hover: #{light-dark(rgba($dark, 0.2), rgba($light, 0.1))};

    --progress-bg: #{light-dark(#fff, darken($dark, 6))};

    --scroll-native: #{light-dark(darken($light, 6), darken($dark, 6))};
    --scroll-webkit: #{light-dark(darken($light, 16), lighten($dark, 12))};

    --alert-success-bg: #{light-dark($green-100, $green-800)};
    --alert-success-color: #{light-dark($green-700, $green-100)};

    --alert-warning-bg: #{light-dark($yellow-100, $yellow-800)};
    --alert-warning-color: #{light-dark($yellow-800, $yellow-100)};

    --alert-danger-bg: #{light-dark($red-100, $red-800)};
    --alert-danger-color: #{light-dark($red-700, $red-100)};

    --alert-info-bg: #{light-dark($cyan-100, $cyan-800)};
    --alert-info-color: #{light-dark($cyan-700, $cyan-100)};

    --display-light: #{light-dark(block, none)};
    --display-dark: #{light-dark(none, block)};
}

.theme-default,
.theme-light {
    --light: var(--ON);
    --dark: var(--OFF);
}

.theme-dark {
    --light: var(--OFF);
    --dark: var(--ON);
}

@media (prefers-color-scheme: dark) {
    .theme-default {
        --light: var(--OFF);
        --dark: var(--ON);
    }
}

body {
    color: var(--text);
}

.display-light {
    display: var(--display-light);
}

.display-dark {
    display: var(--display-dark);
}

// Core branding
.navbar-brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 6px;
    margin-top: 7px;
    margin-left: 5px;
    margin-right: 5px;
}

// Scrollbar
* {
    scrollbar-width: thin;
}

// Titels
.titlebar {
    & > h1 {
        min-height: 28px;
        margin-top: 6px;
        margin-bottom: 0;
        @include font-size($h4-font-size);

        &:last-child {
            margin-bottom: 6px;
        }
    }

    & > .d-flex {
        margin-top: 6px;
        margin-bottom: 0;

        h1 {
            min-height: 28px;
            @include font-size($h4-font-size);

            &:last-child {
                margin-bottom: 6px;
            }
        }
    }
}

// Forms
.form-text {
    &:last-child {
        margin-bottom: 0;
    }
}

// Timeline items
.titel {
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.timeline {
    a.event,
    a.platform-event,
    a.subevent,
    a.flag {
        text-decoration: none;
        color: inherit;

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

    .event {
        display: flex;
        min-height: 40px;
        align-items: center;
        transition: $transition-base;
        border-radius: 0.25rem;

        &:not(:last-child) {
            margin-bottom: 0.25rem;
        }

        &:nth-child(odd) {
            background-color: var(--timeline-bg-nth);
        }

        .icon {
            width: 40px;
            text-align: center;
            flex-shrink: 0;
        }

        &.full-timeline {
            .revision {
                min-width: 150px;
            }
        }

        .revision {
            margin-right: 0.5rem;
            flex-shrink: 0;
        }

        .message {
            flex: 1;
            margin-right: 0.5rem;
        }

        .tags {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            margin-top: 0.25rem;
            padding: 0;
            gap: 4px;

            & > span {
                margin: 0.25rem 0 0 0;
            }
        }

        .version {
            margin-right: 0.5rem;
            font-size: 90%;
            text-align: right;
        }
    }

    .platform-event {
        --event-border-radius: 0.375rem;

        width: 100%;
        padding: 0 0 0 0.75rem;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: 20px auto;
        grid-template-areas: "platform-event-icon platform-event-events";
        min-height: 40px;
        align-items: flex-start;

        transition: $transition-base;

        box-shadow: $box-shadow-sm;
        background-color: var(--card-bg);
        border-radius: var(--event-border-radius);

        .platform-event-icon {
            grid-area: platform-event-icon;
            height: 40px;
            display: flex;
            align-items: center;
        }

        .platform-event-events {
            grid-area: platform-event-events;
        }

        &:not(:last-child) {
            margin-bottom: 0.25rem;
        }

        .subevent {
            padding: 0.5rem;
            display: grid;
            gap: 1.5rem;
            grid-template-columns: 32px 120px auto;
            grid-template-areas: "subevent-version subevent-build subevent-tags";
            min-height: 40px;
            align-content: center;

            transition: background-color .2s ease-in-out;

            &.subevent-extended {
                grid-template-columns: 32px 1fr 1fr auto;
                grid-template-areas: "subevent-version subevent-build subevent-tags subevent-actions";
            }

            &.subevent-flight {
                grid-template-columns: 1fr 1fr;
                grid-template-areas: "subevent-build subevent-tags";
            }

            &:first-child {
                border-top-left-radius: 0 !important;
                border-top-right-radius: var(--event-border-radius) !important;
            }

            &:last-child {
                border-bottom-left-radius: 0 !important;
                border-bottom-right-radius: var(--event-border-radius) !important;
            }

            &.subevent-colored {
                grid-template-columns: 32px auto;
                grid-template-areas: "subevent-version subevent-build subevent-build";

                border-top-color: transparent;
                border-radius: var(--event-border-radius) 0 0 var(--event-border-radius);

                & + .subevent {
                    border-top-color: transparent;
                }

                .subevent-version {
                    color: #fff;
                }
            }

            &:not(:first-child) {
                border-top: 1px solid var(--nav-border-color);
            }

            .subevent-version {
                grid-area: subevent-version;
                font-family: $font-family-monospace;
                color: $text-muted;
                display: flex;
                align-items: center;
            }

            .subevent-build {
                grid-area: subevent-build;
                display: flex;
                align-items: center;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .subevent-tags {
                grid-area: subevent-tags;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 4px;

                .badge {
                    display: block;
                }
            }

            .subevent-actions {
                grid-area: subevent-actions;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }

        a.subevent {
            &:hover {
                border-top-color: transparent;
                border-radius: var(--event-border-radius) 0 0 var(--event-border-radius);
                background-color: var(--card-bg-hover)
            }

            &:hover + .subevent {
                border-top-color: transparent;
            }
        }

        .icon {
            width: 40px;
            text-align: center;
            flex-shrink: 0;
        }

        &.full-timeline {
            .revision {
                min-width: 150px;
            }
        }

        .revision {
            margin-right: 0.5rem;
            flex-shrink: 0;
        }

        .message {
            flex: 1;
            margin-right: 0.5rem;
        }

        .tags {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            margin-top: 0.25rem;
            padding: 0;
            gap: 4px;

            & > span {
                margin: 0.25rem 0 0 0;
            }
        }

        .version {
            margin-right: 0.5rem;
            font-size: 90%;
            text-align: right;
        }
    }

    .flag {
        width: 100%;
        gap: 0.25rem 1rem;
        padding: 0.25rem 0.5rem;
        display: grid;
        grid-template-columns: fit-content(100%) auto auto;
        grid-template-rows: auto;
        grid-template-areas: "flag-name flag-id flag-status";
        transition: $transition-base;
        border-radius: 0.25rem;
        height: 40px;
        align-items: center;

        &.flag-descripted {
            grid-template-areas: "flag-name flag-id flag-status" "flag-description flag-description flag-description";
            padding: 0.25rem 0.5rem 0.5rem;
            height: auto;

            .flag-description {
                color: $text-muted;
                font-size: .875rem;
            }
        }

        .flag-name {
            grid-area: flag-name;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .flag-id {
            grid-area: flag-id;
        }

        .flag-status {
            grid-area: flag-status;

            justify-self: flex-end;
        }

        .flag-description {
            grid-area: flag-description;
        }

        &:not(:last-child) {
            margin-bottom: 0.25rem;
        }

        &:nth-child(odd) {
            background-color: var(--timeline-bg-nth);
        }
    }
}

// Badge
.badge {
    color: var(--text-inverse);
}

// Cards
a.card {
    text-decoration: none;
    color: inherit;

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

.card {
    .card-footer {
        background: transparent;
        border-top: 1px solid var(--main-border-color);
        padding: 0.5rem 0.75rem;
    }

    &.channel {
        min-width: 150px;
        background-color: var(--card-bg);
        border: none;
        box-shadow: $box-shadow-sm;
        padding: 0.5rem 0.75rem;
        height: 84px;
        display: flex;
        flex-direction: column;

        &.channel-disabled {
            .channel-name {
                filter: grayscale(1);
            }
        }

        .channel-name {
            margin-top: -0.125rem;
            margin-bottom: -0.375rem;
            font-weight: 600;
            font-size: 0.9375rem;
        }

        .channel-build {
            font-weight: 700;
            font-size: 1.125rem;
        }

        .channel-date {
            color: $text-muted;
            font-size: 0.875rem;
        }
    }

    &.release {
        background: var(--card-bg);
        border: none;
        box-shadow: $box-shadow-sm;
        padding: 0.75rem;
        height: 100%;

        h3 {
            margin-bottom: 0;
        }

        .release-channels {
            display: flex;
            flex-direction: row;
            align-items: center;

            .badge {
                display: inline-block;
            }
        }

        .release-actions {
            border-top: 1px solid var(--nav-bg);
            padding: 0.5rem 0.75rem;
            border-bottom-left-radius: $border-radius;
            border-bottom-right-radius: $border-radius;
            margin: 0.75rem -0.75rem -0.5rem -0.75rem;
        }
    }
}

// Utilities
.text-sm {
    font-size: 0.8rem;
}

.text-md {
    font-size: 0.9rem;
}

// Settings
.settings-card {
    padding: 0 1rem 0 0.25rem;
    height: 64px;
    background-color: var(--card-bg);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: $border-radius;
    border: var(--main-border-color) 1px solid;

    & + & {
        margin-top: 0.125rem;
    }

    .settings-icon {
        width: 56px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-control {
        padding: 0.25rem 0.5rem;
        width: 240px;
        min-width: auto;
    }
}

a.settings-card {
    color: var(--text);
    text-decoration: none;
    border: none;
    box-shadow: $box-shadow-sm;

    &:hover {
        transition: $transition-base;
        background-color: var(--card-bg-hover);
    }
}

// Tables
.table {
    --bs-table-color: var(--text);
    --bs-border-color: var(--table-border-color);
}

// Utils
.mw-0 {
    min-width: 0;
}

.bg-red {
    background: $red;
}

.bg-orange {
    background: $orange;
}

.bg-yellow {
    background: $yellow;
}

.bg-green {
    background: $green;
}

.bg-teal {
    background: $teal;
}

.bg-purple {
    background: $purple;
}

// Modal
.modal-content {
    background-color: var(--card-bg);

    .btn-close {
        color: var(--text);
    }

    .modal-header,
    .modal-footer {
        border: none;
    }

    .modal-footer {
        justify-content: space-between;
    }
}

// Columns
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: masonry;
    gap: .5rem;

    @media (max-width: 1400px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 1200px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 768px) {
        grid-template-columns: repeat(1, 1fr);
    }
}

// Branding
.f-384, a.f-384 {
    font-family: "Century Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    color: var(--text);
    text-decoration: none;

    &:hover {
        color: var(--text-hover) !important;
    }
}

.studio-384 {
    background-image: linear-gradient(-45deg, #00b573 0%, #78b500 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
