// 1. Make the icon span two rows to spread over the whole Item vertically and make it centered.

@use 'sass:map';
@use 'theme';
@use '../../settings/cursors';
@use '../../tools/form-fields';
@use '../../tools/reset';
@use '../../tools/typography';

.Item:where(button) {
    @include reset.button();

    text-align: left;
}

.Item {
    @include form-fields.item();

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;

    @media (hover: hover) {
        &:hover {
            text-decoration: none;
        }
    }

    &:active,
    &:has(:active) {
        text-decoration: none;
    }
}

.Item__label {
    @include form-fields.item-label();

    grid-column: 2;
}

.Item__helperText {
    @include form-fields.helper-text();
    @include form-fields.item-helper-text();

    grid-column: 2;
    grid-row: 2;
}

.Item__icon {
    display: flex;
    grid-row: span 2; // 1.
    color: theme.$icon-color-state-default;
}

.Item__icon--start {
    grid-column: 1;
    margin-inline-end: theme.$gap;
}

.Item__icon--end {
    grid-column: 3;
    margin-inline-start: theme.$gap;
}

.Item--disabled {
    @include form-fields.item-disabled();

    user-select: none;
    pointer-events: none;
    cursor: cursors.$disabled;
}

.Item--disabled .Item__label {
    @include form-fields.label-disabled();
}

.Item--disabled .Item__helperText {
    @include form-fields.helper-text-disabled();
}

.Item--disabled .Item__icon {
    color: theme.$icon-color-state-disabled;
}
