@use '../abstracts/variables';
@use '../abstracts/mixins';
@use '../abstracts/functions';

// -----------------------------------------------------
//  Input
// -----------------------------------------------------
.pepperi-input, .pep-input {
    border-radius: variables.$border-radius-md;
    min-width: 1.5rem;
    width: inherit;
    padding: 0 0.75rem;
    height: variables.$form-field-height; // 2.5rem;

    &:hover {
        //cursor: pointer;
    }
    &:focus {
    }
    &:active {
        //cursor: pointer;
    }
    &.read-only {
        border-radius: 0;
    }
    &.disable,
    &:disabled {
    }
}

.pepperi-card-input, .pep-card-input {
    &:not(.multi-rows) {
        @include mixins.ellipsis();
        align-items: center;
    }

    padding: 0.125rem 0.25rem;
}

.pepperi-report-input, .pep-report-input {
    padding: 0 0.25rem;
    // height: variables.$table-row-fieldset-height; // 2.5rem;
    // line-height: variables.$table-row-fieldset-height !important; // 2.5rem !important;
    vertical-align: middle;
    display: block;
    @include mixins.ellipsis();
}

@mixin pep-input-theme() {
    .pepperi-input:not(.pepperi-checkbox-container), .pep-input:not(.pep-checkbox-container) {
        // background: functions.get-pep-color(color-system-primary, color-tran-30);
        border: none;

        &::placeholder {
            color: functions.get-pep-color(color-text, color-dimmed);
            opacity: 1; /* Firefox */
        }

        &::-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: functions.get-pep-color(color-text, color-dimmed);
        }

        &::-ms-input-placeholder {
            /* Microsoft Edge */
            color: functions.get-pep-color(color-text, color-dimmed);
        }

        &::error {
            @include mixins.state-error();
        }

        @include mixins.state-weak-default();
        &.no-default-background {
            background: unset;
        }

        &:hover:not(.disable) {
            @include mixins.state-weak-hover();
        }
        &:focus:not(.disable) {
            @include mixins.state-weak-focus();
        }
        &:active {
            @include mixins.state-weak-active();
        }
        &.disable,
        &:disabled {
            @include mixins.state-weak-disable();
        }
    }
}