@import '../../../Styles/abstracts/_media-queries.scss';
@import '../../../Styles/abstracts/_bit-css-variables.scss';

section {
    width: 100%;
}

.grid-container {
    overflow: auto;
    height: calc(#{$bit-env-height-available} - 12.1rem);

    @include lt-md {
        height: calc(#{$bit-env-height-available} - 17rem);
    }

    @include lt-sm {
        height: calc(#{$bit-env-height-available} - 16rem);
    }
}

::deep {
    .categories-grid {
        width: 100%;
        height: 100%;
        border-spacing: 0;
        background-color: $bit-color-background-secondary;

        .name-col {
            padding-inline-start: 16px;
        }

        .count-col {
            width: 110px;
        }

        .color-col {
            width: 70px;
        }

        .actions-col {
            width: 95px;
        }

        thead {
            height: 44px;
            background-color: $bit-color-background-tertiary;
        }

        td {
            height: 44px;
            white-space: nowrap;
            border-bottom: 1px solid $bit-color-border-tertiary;
        }

        .col-options {
            padding: 8px;
        }

        .col-options-button {
            cursor: pointer;
        }

        .color-box {
            width: 24px;
            height: 24px;
            display: block;
            border-radius: 2px;
        }
    }

    .bitdatagrid-paginator {
        padding: 8px;
        font-size: 14px;
        flex-wrap: nowrap;
        padding-inline-start: 16px;
        background-color: $bit-color-background-secondary;

        button {
            cursor: pointer;
            font-size: 12px;
        }
    }
}
