@import '/_content/MudBlazor/MudBlazor.min.css' layer(mudblazor);
@import '/EvieAdminPortal.UI.styles.css' layer(components);
@layer mudblazor, app, mudoverrides, components;

:root {
    /* Everflow Colour Pallete */
    --everflow-magenta: #ff0088;
    --everflow-green: #7fffd4;
    --everflow-blue: #00ffff;
    --everflow-black: #282828;
    --everflow-black-75: #282828;
    --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: #0a5f07;
    --everflow-attention-yellow: #ffcc33;
    --everflow-error-red: #e31d3d;
    --everflow-default-active: #22687e;
    --everflow-default-unavailable: #90b3bf;
    --theme-bg-primary: var(--mud-palette-appbar-background);
    --theme-text-primary: var(--mud-palette-appbar-text);
    --mud-typography-button-text-transform: unset !important;
}

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

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

    .action-header {
        text-align: right;
    }

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

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

    table th span.efsortlabel{
        display: flex;
    }

    table th.efth {
        background-color: var(--theme-bg-primary) !important;
        color: var(--everflow-off-white) !important;
    }

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

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

    .spinner:before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        margin-left: -10px;
        border-radius: 50%;
        border: 2px solid #ccc;
        border-top-color: #000;
        animation: spinner .6s linear infinite;
    }

    /* 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;
    }

    .text-right {
        text-align: right;
    }

        .text-right .mud-table-sort-label {
            justify-content: flex-end;
        }

    .tnum {
        font-feature-settings: "tnum";
    }

    .no-select
    .mud-breadcrumbs, .mud-breadcrumbs > *,
    .mud-table-pagination * {
        user-select: none;
    }

    .no-scroll {
        overflow: hidden;
    }
}

@layer mudoverrides {
    .mud-table-cell {
        padding: .5rem;
    }

    .mud-table-row:not(.disabled):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(--theme-bg-primary);
        color: var(--everflow-off-white);
    }

    .mud-drawer-header {
        background: var(--theme-bg-primary);
        color: var(--theme-text-primary);

        h1, h2, h3, h4, h5 {
            align-self: center;
        }
    }

    .mud-drawer-content .mud-input-control {
        margin-top: 1rem;
    }

    .mud-drawer {
        max-width: min(1000px, 70vw);
    }
}