// Manager Interface css

@import "#{$theme_dir}/css/_variables.scss";
@import "components/bourbon/app/assets/stylesheets/bourbon";
@import "#{$theme_dir}/css/_utils.scss";

.edit-flags-modal {
    .modal-body {
        height: 410px;
        overflow-y: auto;
    }
    .edit-flag {
        @include display(flex);
        @include justify-content(space-between);
        @include align-items(center);
        margin-bottom: $lg-spacing;

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

        input {
            width: 225px;
            padding: $sm-spacing $lg-spacing;
            border: 1px solid $grey-hover-bg;
            border-radius: $border-radius-base;
            font-size: $font-size-lg;
        }

        button {
            span {
                color: $error-color;
                font-size: 20px;
                margin: 0px;
            }
        }
    }
}

.approval-overlay-container {

    $btn-fromTop: 70px;
    $btn-size: 24px;
    $btn-spacing: 16px;

    position: fixed;
    top: 0;
    bottom: 0;
    #{$right}: 0;
    width: 50vw;
    min-width: 500px;
    overflow: auto;
    z-index: 1001;
    background-color: transparent;

    .form-container {
        position: absolute;
        #{$right}: 0;
        display: grid;
        grid-template-rows: 1fr;
        width: calc(100% - #{$btn-size} - 20px);
        min-height: 100%;
        background-color: $white;

        #validation-box {
            margin: 0;
        }
        header{
            position: sticky;
            top: 0;
            z-index: 3;
            .user_hint {
                margin-bottom: $sm-spacing !important;
            }
        }
        .adm-info {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 48%));
            row-gap: $xs-spacing;
            column-gap: $lg-spacing;
            word-break: normal;
            transition: opacity .4s ease-in;
        }
        .dropdown-menu:not(.flag-dropdown) {
            #{$right}: 0 !important;
            #{$left}: unset !important;
            max-width: calc(50vw - #{$btn-size} - 20px - 15px - 16px); // Same as form-container accounting 15px from header padding and 16px scroll bar
            min-width: 441px; //500px - 24px - 20px - 15px
            max-height: calc(80vh - 280px);
            overflow: auto;
            .dropdown-item:active {
                background-color: $light-gray;
                color: inherit;
            }
            &.approve-dropdown {
                top: -5px !important;
                transform: translateY(-100%) !important;
                min-width: 100%;
            }
        }
        .loading-job-modal {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.6);
            z-index: 101;

            .loading-container {
                position: fixed;
                width: calc(50vw - #{$btn-size} - 20px - 15px);
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                div {
                    text-align: center;
                }
            }
        }
    }
    .emp-approval {
        position: sticky;
        bottom: 100px;
        z-index: 2;
        & > div {
            max-width: 500px;
            background-color: $info-bg;
            border-radius: 3px;
            color: $info-color;
            border: 1px solid $info-color;
        }
    }
    .button-bar {
        position: sticky;
        bottom: 0;
        justify-content: space-between;
        padding: $lg-spacing $md-spacing;
        background: rgb(255, 255, 255); // Fallback if gradient is not supported
        background: linear-gradient(0deg, white 20%, rgba(255, 255, 255, 0.6) 100%);
        backdrop-filter: blur(1px);
        .btn-break {
            height: unset;
            word-break: normal;
        }
        .approve-btn {
            margin-#{$right}: 1px;
        }
    }
    .control-buttons {
        position: fixed;
        width: $btn-size;
        height: $btn-size;
        padding: $xs-spacing;
        &:nth-child(1) {
            top: $btn-fromTop;
        }
        &:nth-child(2) {
            top: $btn-fromTop + ($btn-size + $btn-spacing) + 10px;
        }
        &:nth-child(3) {
            top: $btn-fromTop + 2*($btn-size + $btn-spacing) + 10px;
        }
    }
}