@use 'admiral/assets/scss-variables' as *;
@use 'admiral/assets/mixins' as *;

.items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    column-gap: var(--space-l);

    @include maxWidth($bp-lMobile) {
        grid-template-columns: minmax(0, 1fr);
    }

    &__Column {
        grid-template-columns: minmax(0, 1fr);
    }
}

.item {
    display: flex;
    flex-direction: column;

    &:not(:last-child) {
        margin-bottom: var(--form-item-mb, var(--space-l));
    }

    &__ColumnSpanTwo {
        grid-column: 1 / -1;
    }
}

.item_Label {
    display: block;

    &:not(:empty) {
        margin-bottom: var(--space-xs);
    }

    &__Required {
        &::before {
            content: '*';
            display: inline-block;
            vertical-align: baseline;
            margin-right: var(--space-2xs);
            color: var(--color-typo-alert);
            font-size: inherit;
        }
    }
}

.item_Field {
    max-width: 100%;
}

.item_Error {
    padding-top: var(--space-2xs);
    font-size: var(--size-text-s);
    color: var(--color-typo-alert);
}

.footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-l);
    margin-top: var(--space-xl);
}

.arrayInput {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--space-l);
    grid-column: 1 / -1;
    counter-reset: arrayInput;
    list-style-type: none;

    &:not(:last-child) {
        margin-bottom: var(--space-xl);
    }

    @include maxWidth($bp-lMobile) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.arrayInput_Item {
    display: flex;
    gap: var(--space-m);
    flex-direction: column;
    counter-increment: arrayInput;
    padding: var(--space-m);
    border-radius: var(--radius-m);
    background: var(--color-bg-stripe);

    &__ColumnSpanTwo {
        grid-column: 1 / -1;
    }
}

.arrayInput_Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--color-bg-border);

    &::before {
        content: counter(arrayInput) '.';
        min-width: 24px;
    }

    &__Empty {
        display: none;
    }

    &__NoOrder {
        &::before {
            content: none;
        }
    }
}

.arrayInput_Children {
    flex-grow: 1;
}

.arrayInput_Footer {
    padding-left: var(--space-m);
}

.slugInput {
    &__Size {
        &L {
            --slug-input-icon-px: calc(var(--control-space-l) * 0.5);
        }

        &S {
            --slug-input-icon-px: calc(var(--control-space-s) * 0.5);
        }

        &XS {
            --slug-input-icon-px: calc(var(--control-space-xs) * 0.5);
        }
    }
}

.slugInput_Icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 var(--slug-input-icon-px, calc(var(--control-space-m) * 0.5));
    color: var(--color-control-bg-border-default);
    transition: color 0.2s;

    &:hover {
        color: var(--color-control-bg-border-default-hover);
    }

    svg {
        width: var(--slug-input-icon-width, 20px);
    }
}
