@use '~@gravity-ui/uikit/styles/mixins';
@use '../mixins' as connMixins;

.conn-list {
    @include connMixins.form-layout(880px);
    display: flex;
    flex-direction: column;

    &__filter {
        width: 220px;
    }

    &__list-title {
        @include mixins.text-header-1();

        margin: 32px 0 20px;

        &:first-child {
            margin-top: 0;
        }
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    &__item {
        flex: 0 0 163px;
        border: 1px solid var(--g-color-line-generic);
        border-radius: 8px;
        transition:
            border-color 0.1s linear,
            background-color 0.1s linear;

        &:hover {
            border-color: var(--g-color-line-generic-hover);
            background-color: var(--g-color-base-simple-hover);
        }

        &:active {
            transform: scale(0.98);
        }
    }

    &__item-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 8px;
        height: 100%;
        padding: 15px 0;
        border-radius: 8px;
        text-decoration: none;
        color: var(--g-color-text-primary);
    }

    &__item-title {
        text-align: center;
    }
}
