@use '../../styles/mixins.scss';

.ydb-cluster {
    --cluster-side-padding: var(--g-spacing-5);
    --sticky-tabs-height: 40px;
    --extra-controls-right: calc(var(--cluster-side-padding) * 2);
    --data-table-start: var(--sticky-tabs-height);
    --ydb-table-with-controls-layout-controls-padding-top: var(--g-spacing-4);

    position: relative;

    overflow: auto;

    width: 100%;
    height: 100%;

    &__sticky-wrapper {
        padding: 0 var(--cluster-side-padding);
    }

    &__dashboard {
        position: sticky;
        left: 0;

        padding: 0 var(--cluster-side-padding);
    }

    &__content {
        width: calc(100% - var(--cluster-side-padding));
        min-height: calc(100% - var(--sticky-tabs-height, 0px));
        //allows controls of TableWithControlsLayout to stick properly
        transform: translateX(var(--cluster-side-padding));
    }

    &__header {
        position: sticky;
        left: 0;

        padding: var(--g-spacing-5) var(--cluster-side-padding);
    }

    &__title {
        font-weight: var(--g-text-header-font-weight);
        @include mixins.header-1-typography();
    }

    &__title-skeleton {
        width: 20%;
        min-width: 200px;
        height: var(--g-text-header-1-line-height);
    }

    &__tabs-sticky-wrapper {
        z-index: 3;

        margin-top: 20px;
        padding: 0 var(--cluster-side-padding);
        @include mixins.sticky-top();
    }
    &__tabs {
        display: flex;
        @include mixins.tabs-wrapper-styles();
    }

    &__sticky-wrapper {
        position: sticky;
        z-index: 4;
        top: 74px;
        left: 0;
    }

    &__auto-refresh-control {
        float: right;

        margin-top: -54px;

        background-color: var(--g-color-base-background);
    }
    &__cluster-configs {
        --ydb-configs-controls-height: 62px;

        //calculate height of configs container
        --ydb-configs-container-height: calc(
            100vh - var(--sticky-tabs-height) - var(--header-height)
        );
        padding-right: var(--g-spacing-5);
    }
}