@layer mudblazor, app, mudoverrides, components;

:root {
    /* Everflow Colour Pallete */
    --everflow-magenta: #ff0088;
    --everflow-green: #7fffd4;
    --everflow-blue: #00ffff;
    --everflow-black: #282828;
    --everflow-black-75: #5e5e5e;
    --everflow-grey: #909090;
    --everflow-grey-75: #acacac;
    --everflow-grey-50: #c7c7c7;
    --everflow-grey-25: #e3e3e3;
    --everflow-grey-13: #f1f1f1;
    --everflow-off-white: #f8f8f8;
    --everflow-success-green: #4aae72;
    --everflow-attention-yellow: #ffcc33;
    --everflow-error-red: #ff3300;
    --everflow-default-active: #22687e;
    --everflow-default-unavailable: #90b3bf;
    --mud-drawer-width: max(500px, 50vw);
}

@layer app {
    @property --hue-everflow-magenta {
        syntax: "<angle>";
        inherits: false;
        initial-value: 328deg;
    }

    /* Loading spinner for html page */

    .loading-spinner:before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        margin-top: -30px;
        margin-left: -30px;
        border-radius: 50%;
        border: 8px solid var(--everflow-grey-25);
        border-top-color: var(--everflow-magenta);
        animation: loading-spinner .6s linear infinite;
    }

    @keyframes loading-spinner {
        to {
            transform: rotate(360deg);
        }
    }

    .strikethrough {
        text-decoration: line-through;
    }

    .bg-everflow-magenta {
        background-color: var(--everflow-magenta);
    }

    .text-everflow-magenta {
        color: var(--everflow-magenta)
    }

    .with-search-appbar .mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always,
    .with-search-appbar .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never),
    .with-search-appbar .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always,
    .with-search-appbar .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
        top: calc(var(--mud-appbar-height) * 2) !important;
    }

    #content {
        position: fixed;
        left: 0;
        padding-left: 1rem !important;
        padding-bottom: 2rem !important;
        width: 100vw;
        max-width: calc(100vw - var(--mud-drawer-width-left));
        max-height: calc(100vh - var(--mud-appbar-height) - 1rem);
        overflow: auto;
        top: calc(var(--mud-appbar-height) + 1rem) !important;
        padding-bottom: 2rem;
    }

    #rightSidebar {
        position: fixed;
        top: 0;
    }

    .with-search-appbar #content {
        top: calc(var(--mud-appbar-height) * 2 + 1rem) !important;
        max-height: calc(100vh - var(--mud-appbar-height) * 2 + 1rem);
    }
}



#search-appbar {
    position: fixed;
    top: var(--mud-appbar-height);
    width: 100vw;
}

.action-buttons {
    display: flex;
    justify-content: right;
}

.grey-out {
    background-color: var(--everflow-grey-25) !important;
}

    .grey-out td {
        color: var(--everflow-grey) !important;
    }

table th span.efsortlabel, table thead span.efsortlabel {
    display: flex;
}

table th.efth, table thead.efth {
    background-color: var(--everflow-magenta) !important;
    color: var(--everflow-off-white) !important;
}

table th span.efsortlabel:hover, table thead span.efsortlabel:hover {
    color: var(--everflow-off-white);
}

@layer mudoverrides {
    /* MudBlazor/Evie Theme Fixes */

    .mud-table-pagination .mud-input-control-input-container :not(:disabled) .mud-icon-root.mud-svg-icon {
        color: var(--everflow-black);
    }

    .mud-layout {
        height: unset;
        min-height: 100vh;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 75%;
        padding-left: 10px;
        margin-bottom: 30px;
    }

    .mud-breadcrumbs a {
        color: var(--everflow-magenta);
    }

    .large-button svg {
        width: 40px;
        height: 40px;
        fill: #FF0088;
    }

    .expansion-panel-bottom-border {
        border-bottom: 1px solid var(--mud-palette-lines-default) !important;
        border-radius: 0 !important;
    }

    .card-bottom-border {
        border-bottom: 1px solid var(--mud-palette-lines-default) !important;
        border-radius: 0 !important;
    }

    .text-break-long-words {
        word-wrap: break-word;
    }

    .expansion-icon {
        transition: .3s cubic-bezier(.25,.8,.5,1),visibility 0s !important;
        margin-top: 2px;
    }

    .expansion-icon-rotated {
        transform: rotate(90deg) !important;
    }

    /* MudDrawer */
    .mud-drawer.mud-drawer-temporary.mud-drawer-pos-right {
        min-height: 100vh;
    }

    .mud-drawer-header {
        background: var(--everflow-magenta);
        color: var(--everflow-off-white);
    }

    .mud-drawer--open {
        right: 0;
        position: absolute;
    }

    .mud-drawer.mud-drawer-responsive {
        height: calc(100vh - (var(--mud-appbar-height)*2));
    }

    .mud-drawer-content > .mud-form {
        gap: .5rem;
    }

    /* MUD Expansion panel */
    .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon.mud-transform {
        transform: rotate(90deg) !important;
    }

    .mud-table-cell {
        padding: 6px;
    }

    .mud-expand-panel-icon {
        order: 1;
        color: var(--everflow-magenta);
        margin-right: 10px;
    }

    .expansion-panel-multiline-header > .mud-expand-panel-header .mud-expand-panel-icon {
        position: absolute;
        top: 18px;
        left: -5px;
    }

    .mud-expand-panel-text {
        order: 2;
    }

    .mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--open ~ div:not(.mud-main-content), .mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--open ~ div:not(.mud-main-content) {
        margin-left: var(--mud-drawer-width-left) !important;
    }

    .mud-appbar {
        z-index: 0 !important;
    }

    .mud-table-row:not(.grey-out):hover {
        background: hsl(var(--hue-everflow-magenta) 100% 95%) !important;
    }

    .mud-table-body .mud-table-cell::selection,
    .mud-table-body .mud-table-cell *::selection {
        background: var(--everflow-magenta);
        color: var(--everflow-off-white);
    }
}

/* Label fixes */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--everflow-black);
}