@use '../core/styles/tokens';
@use '../core/styles/common/tokens' as *;

.kbq-datepicker-toggle-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.kbq-datepicker-toggle:focus {
    outline: 0;
}

.kbq-datepicker-toggle__button.kbq-button-icon {
    // FIXME: no such tokens in design-tokens, component needs to be reviewed
    width: var(--kbq-datepicker-toggle-size-width);
    height: var(--kbq-datepicker-toggle-size-height);
    margin-left: 2px;
}

.kbq-form-field-appearance-legacy {
    .kbq-form-field-prefix,
    .kbq-form-field-suffix {
        .kbq-datepicker-toggle__default-icon {
            width: 1em;
        }
    }
}

.kbq-form-field:not(.kbq-form-field-appearance-legacy) {
    .kbq-form-field-prefix,
    .kbq-form-field-suffix {
        .kbq-datepicker-toggle__default-icon {
            display: block;
            width: 1.5em;
            height: 1.5em;
        }

        .kbq-button-icon .kbq-datepicker-toggle__default-icon {
            margin: auto;
        }
    }
}