@use './parts/general';

#adminmenu {
    .toplevel_page_accessible-docs {
        .dashicons-before::before {
            content: '';
            background-image: url('../images/accessible-docs-icon.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }
    }
}

.accessible-docs {
    &__wrap {

        .displaying-num {
            align-self: center;
        }

        .pagination-links {
            gap: 3px;
        }

        .page-numbers {
            display: inline-block;
            vertical-align: baseline;
            min-width: 30px;
            min-height: 30px;
            margin: 0;
            padding: 0 4px;
            font-size: 16px;
            line-height: 1.625;
            text-align: center;
            color: #2271b1;
            box-sizing: border-box;
            border-radius: 3px;

            @media screen and (max-width: 782px) {
                min-width: 44px;
                padding: 12px 8px;
                font-size: 18px;
                line-height: 1;
            }

            &.current {
                background: #135e96;
                border:1px solid #135e96;
                color: #fff;
            }
        }
    }

    &-form {
        gap: 15px;
        width: 100%;
        max-width: 400px;

        &__submit-wrapper {
            gap: 10px;
        }

        &__row,
        &__col {
            gap: 10px;
        }

        &__row {
            &-date-range {
                flex-direction: row;
                flex-wrap: wrap;
            }
        }

        &__col {
            width: 100%;
            
            @media screen and (min-width: 783px) {
                width: calc(50% - 5px);
            }
        }

        &__input,
        &__select {
            width: 100%;
        }
    }

    &__hr {
        margin: 20px 0;
    }

    &-heading-buttons {
        margin-bottom: 20px;
        gap: 20px;
    }

    &-admin {
        &__loader {
            background-image: url('../images/loader.svg');
            background-position: center;
            background-size: 60px;
            background-repeat: no-repeat;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: rgba($color: #2D2E2E, $alpha: 0.5);
            visibility: hidden;
            opacity: 0;
            transition: 300ms linear;
            transition-property: opacity, visibility;

            &.active {
                visibility: visible;
                opacity: 1;
            }
        }

        &-popup-settings {
            &__form {
                max-width: 600px;
            }
        }
        
    }
}