@forward '@gravity-ui/uikit/styles/mixins.scss';

@mixin danger-heavy-label() {
    color: var(--g-color-text-light-primary);
    background-color: var(--g-color-base-danger-heavy);

    &:hover {
        background-color: var(--g-color-base-danger-heavy-hover) !important;
    }
}

@mixin capacity-alert-label-colors($color) {
    background-color: var(--ydb-capacity-alert-label-background);

    @if $color == 'green' {
        --ydb-capacity-alert-label-background: var(--g-color-base-positive-light);

        color: var(--g-color-text-positive-heavy);
    } @else if $color == 'yellow' {
        --ydb-capacity-alert-label-background: var(--g-color-base-warning-light);

        color: var(--g-color-text-warning-heavy);
    } @else if $color == 'red' {
        --ydb-capacity-alert-label-background: var(--g-color-base-danger-light);

        color: var(--g-color-base-danger-heavy);
    } @else {
        --ydb-capacity-alert-label-background: var(--ydb-space-#{$color}-bg);

        color: var(--ydb-space-#{$color}-text);
    }
}

@mixin container() {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

@mixin container-fluid() {
    max-width: 100%;
    padding: 0 15px;
}

@mixin flex-container() {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

@mixin body-1-typography() {
    font-size: var(--g-text-body-1-font-size);
    line-height: var(--g-text-body-1-line-height);
}

@mixin body-2-typography() {
    font-size: var(--g-text-body-2-font-size);
    line-height: var(--g-text-body-2-line-height);
}

@mixin body-3-typography() {
    font-size: var(--g-text-body-3-font-size);
    line-height: var(--g-text-body-3-line-height);
}

@mixin lead-typography() {
    font-size: var(--g-text-subheader-3-font-size);
    line-height: var(--g-text-subheader-3-line-height);
}

@mixin subheader-1-typography() {
    font-size: var(--g-text-subheader-1-font-size);
    line-height: var(--g-text-subheader-1-line-height);
}

@mixin subheader-3-typography() {
    font-size: var(--g-text-subheader-3-font-size);
    line-height: var(--g-text-subheader-3-line-height);
}

@mixin header-1-typography() {
    font-size: var(--g-text-header-1-font-size);
    line-height: var(--g-text-header-1-line-height);
}

@mixin header-2-typography() {
    font-size: var(--g-text-header-2-font-size);
    line-height: var(--g-text-header-2-line-height);
}

@mixin sticky-top($top: 0) {
    position: sticky;
    top: $top;
    left: 0;

    background-color: var(--g-color-base-background);
}

@mixin loader() {
    position: fixed;
    z-index: 99999999;
    top: 50%;
    left: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin cell-container() {
    display: inline-block;
    overflow: hidden;

    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@mixin controls($padding-top: var(--g-spacing-4)) {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: $padding-top 0 var(--g-spacing-4);
}

@mixin search() {
    width: 238px;
}

@mixin info-viewer-title {
    margin: var(--ydb-info-viewer-title-margin, 15px 0 10px);

    font-weight: 600;
    @include body-2-typography();
}

@mixin data-table-styles {
    --data-table-row-height: 40px;
    --data-table-cell-align: middle;
    --data-table-head-align: middle;

    .data-table {
        @include body-2-typography();

        &__th,
        &__td {
            height: var(--data-table-row-height);

            border-top: unset;
            border-right: unset;
            border-left: unset;
        }

        &__td:has(> a) {
            color: var(--g-color-text-link);
        }

        &__th {
            font-weight: bold;
        }

        &__table {
            border-spacing: 0;
            border-collapse: separate;
        }

        tbody > tr:last-child {
            td {
                border-bottom: unset;
            }
        }
    }

    // DataTable with moving head is actually made of two separate tables
    // The second table has header with zero height, so it's actually invisible
    // There should not be any height set for this header
    .data-table__box_sticky-head_moving {
        .data-table__th {
            height: unset;
        }
    }
}

@mixin query-data-table() {
    & .data-table {
        &__box {
            .data-table__table-wrapper {
                padding-bottom: 20px;
            }
        }

        &__th {
            box-shadow: inset 0 -1px 0 0 var(--g-tabs-color-divider);
        }
    }
}

.link {
    text-decoration: none;

    color: var(--g-color-text-link);

    &_external {
        margin-right: 10px;
    }

    &:hover {
        color: var(--g-color-text-link-hover);
    }
}

@mixin freeze-nth-column($nth: 1, $coordinate: 0, $border-width: 1px, $side: left) {
    $clearance-width: 1px; /* Delete clearance and cancel column shadow for previous columns */
    $border-side: if($side == left, right, left);

    /* Freeze td */
    & .data-table__td:nth-child(#{$nth}),
    & .data-table__head-row:first-child .data-table__th:nth-child(#{$nth}) {
        position: sticky;
        z-index: 2000;
        #{$side}: $coordinate;

        border-#{$border-side}: $border-width solid var(--g-color-line-generic);
        background-color: var(--g-color-base-background);
    }
    .data-table__row:hover .data-table__td:nth-child(#{$nth}) {
        background-color: var(--ydb-data-table-color-hover) !important;
    }

    /* stylelint-disable-next-line order/order */
    @for $i from 0 through $nth {
        & .data-table__td:nth-child(#{$i}),
        & .data-table__head-row:first-child .data-table__th:nth-child(#{$i}) {
            box-shadow: unset;

            @if $i < $nth {
                border-#{$border-side}: unset;
            }
        }
    }
}

@mixin tabs-wrapper-styles() {
    --g-tabs-border-width: 0;

    box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
}

@mixin query-buttons-animations() {
    animation: errorAnimation 500ms linear;

    @keyframes errorAnimation {
        8%,
        41% {
            transform: translateX(-2px);
        }
        25%,
        58% {
            transform: translateX(2px);
        }
        75% {
            transform: translateX(-1px);
        }
        92% {
            transform: translateX(1px);
        }
        0%,
        100% {
            transform: translateX(0);
        }
    }
}

/* Before changing: verify usages in the internal version */

@mixin entity-state-colors($block: null) {
    --entity-state-border-color: var(--g-color-base-misc-heavy);
    --entity-state-background-color: var(--g-color-base-misc-light);
    --entity-state-fill-color: var(--g-color-base-misc-medium);
    --entity-state-font-color: var(--g-color-text-primary);

    &_green {
        --entity-state-font-color: var(--g-color-text-positive);
        --entity-state-border-color: var(--entity-state-border-color-green, none);
        --entity-state-background-color: var(--g-color-base-positive-light);
        --entity-state-fill-color: var(--g-color-base-positive-light);

        &#{$block}_highlighted {
            --entity-state-border-color: none;
            --entity-state-background-color: var(--g-color-base-positive-light-hover);
            --entity-state-fill-color: var(--g-color-base-positive-light-hover);
        }
    }

    &_blue {
        --entity-state-font-color: var(--g-color-text-info);
        --entity-state-border-color: var(--entity-state-border-color-blue, none);
        --entity-state-shadow-color: var(--g-color-base-info-medium);
        --entity-state-background-color: var(--g-color-base-info-light);
        --entity-state-stripe-background-color: var(--g-color-base-info-light);
        --entity-state-fill-color: var(--g-color-base-info-medium);
        --entity-state-stripe-color: var(--g-color-base-info-medium);

        &#{$block}_highlighted {
            --entity-state-border-color: none;
            --entity-state-shadow-color: var(--g-color-base-info-medium-hover);
            --entity-state-background-color: var(--g-color-base-info-light-hover);
            --entity-state-stripe-background-color: var(--g-color-base-info-light-hover);
            --entity-state-fill-color: var(--g-color-base-info-medium-hover);
            --entity-state-stripe-color: var(--g-color-base-info-medium-hover);
        }
    }

    &_yellow {
        --entity-state-font-color: var(--g-color-text-warning);
        --entity-state-border-color: var(--entity-state-border-color-yellow, none);
        --entity-state-background-color: var(--g-color-base-warning-light);
        --entity-state-fill-color: var(--g-color-base-warning-light);

        &#{$block}_highlighted {
            --entity-state-border-color: none;
            --entity-state-background-color: var(--g-color-base-warning-light-hover);
            --entity-state-fill-color: var(--g-color-base-warning-light-hover);
        }
    }

    &_orange {
        --entity-state-font-color: var(--g-color-private-orange-500);
        --entity-state-border-color: var(--entity-state-border-color-orange, none);
        --entity-state-background-color: var(--g-color-private-orange-100);
        --entity-state-fill-color: var(--g-color-private-orange-300);
    }

    &_red {
        --entity-state-font-color: var(--g-color-text-danger);
        --entity-state-border-color: var(--g-color-line-danger);
        --entity-state-background-color: var(--g-color-base-danger-light);
        --entity-state-fill-color: var(--g-color-base-danger-light);
        --entity-state-icon-color: var(--g-color-text-danger);

        &#{$block}_highlighted {
            --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
            --entity-state-icon-color: var(--g-color-text-danger-heavy);
            --entity-state-background-color: var(--g-color-base-danger-light-hover);
            --entity-state-fill-color: var(--g-color-base-danger-light-hover);
        }
    }

    &_darkgrey {
        --entity-state-font-color: var(--g-color-text-secondary);
        --entity-state-border-color: var(--entity-state-border-color-darkgrey, none);
        --entity-state-shadow-color: var(--g-color-base-neutral-light);
        --entity-state-fill-color: var(--g-color-base-neutral-light);
        --entity-state-background-color: transparent;
        --entity-state-stripe-color: var(--g-color-base-neutral-light);

        &#{$block}_highlighted {
            --entity-state-border-color: none;
            --entity-state-shadow-color: var(--g-color-base-neutral-light-hover);
            --entity-state-fill-color: var(--g-color-base-neutral-light-hover);
            --entity-state-background-color: transparent;
            --entity-state-stripe-color: var(--g-color-base-neutral-light-hover);
        }
    }

    &_grey {
        --entity-state-font-color: var(--g-color-text-secondary);
        --entity-state-background-color: var(--g-color-text-dark-hint);
        --entity-state-fill-color: var(--g-color-text-dark-secondary);
        --entity-state-border-color: none;

        &#{$block}_highlighted {
            --entity-state-background-color: var(--g-color-text-dark-hint);
            --entity-state-fill-color: var(--g-color-text-dark-complementary);
        }
    }
}