@import '~@gravity-ui/uikit/styles/mixins';

.params-settings {
    &__row {
        display: grid;
        grid-template-columns: 164px auto 28px;
        width: 100%;
        transition: background-color 0.2s ease;
        padding: 0 10px 0 4px;
        box-sizing: border-box;
        column-gap: 28px;
        border-bottom: 1px solid var(--g-color-line-generic);

        &.top {
            align-items: center;
            height: 35px;
            @include text-subheader-1();
            font-weight: 500;
        }
    }

    &__left,
    &__center,
    &__right {
        padding: 6px 0;

        &.top {
            padding: 0 0 0 8px;
        }
    }

    &__center {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px;
    }

    &__row_hover:not(.top),
    &__row:not(.top):hover {
        background-color: var(--g-color-base-simple-hover);
    }

    &__input {
        &.clear {
            padding-left: 9px;
        }
    }

    &__icon-add,
    &__icon-delete {
        color: var(--g-color-text-secondary);
    }

    &__button-add_hidden,
    &__button-remove_hidden {
        display: none;
    }

    &__icon-remove {
        color: var(--g-color-text-danger);
    }

    &__button-remove:hover &__icon-delete,
    &__button-add:hover &__icon-add {
        color: var(--g-color-text-primary);
    }

    &__controls {
        display: flex;
        justify-content: space-between;
        padding-top: 6px;
    }
}
