@use 'accessibility.mixins' as a11y;
@use 'loading-indicator' as loadingIndicator;

// TODO: this mixin should not be used an element that is not input.
// eUI Inputs Layout & states commons
// Used for: eui-input-text, eui-input-number, eui-select, eui-textarea, eui-datepicker, eui-autocomplete
@mixin eui-input($element: input) {
    font: var(--eui-f);
    appearance: none;
    background-color: var(--eui-c-surface-container);
    border: 1px solid var(--eui-c-secondary-border);
    border-radius: var(--eui-br-s);
    box-shadow: none;
    color: var(--eui-c-text);
    min-height: var(--eui-s-5xl);
    padding: calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-m) - 1px); // ECL aligned
    width: 100%;
    @include a11y.eui-accessible-focus();

    &:not([hidden]) {
        display: block;
    }

    &::placeholder {
        color: var(--eui-c-text-lighter) !important;
        opacity: 1;     // Firefox adds a lower opacity to the placeholder color
    }

    // STATES
    &[readonly] {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        height: inherit;
        padding-left: 0;
        padding-right: 0;
        pointer-events: none;

        + .eui-feedback-message,
        + .eui-input-maxlength {
            appearance: none;
            display: none;
        }
    }

    &[disabled]:not([readonly]),
    &--disabled:not([readonly]) {
        background-color: var(--eui-c-disabled-bg) !important;
        border: 1px solid var(--eui-c-secondary-border-lighter);
        color: var(--eui-c-text-light);
        @if $element == textarea {
            pointer-events: auto;
        } @else {
            pointer-events: none;
        }
    }

    &--invalid,
    &--danger {
        border: 1px solid var(--eui-c-danger-border);
    }

    &--loading {
        padding-right: var(--eui-s-7xl);

        &-icon {
            @include loadingIndicator.loading-indicator();
        }
    }

    &--clearable {
        padding-right: var(--eui-s-7xl);
    }
}
