@import '../../_coreStyles.scss';
$textFieldHorizontalPadding: $spacing-12 - $spacingBorder;

.bolt-textfield {
    color: $primary-text;
    border-radius: 2px;
    border: 1px solid $neutral-20;
    background-color: $backgroundColor;
    overflow: hidden;
    min-width: 64px;

    &.disabled {
        color: $disabled-text;
        background-color: $neutral-4;
    }

    &.focused.focus-treatment {
        border-color: $communication-background;
        @include box-shadow-focus-rect();
    }

    .prefix {
        padding-left: $textFieldHorizontalPadding;
    }

    .suffix {
        padding-right: $textFieldHorizontalPadding;
    }
}

// If there is a label, then an extra div is introduced and the error class
// is not on the same div as bolt-textfield, so we use both of these selectors
// to make sure that both cases are handled.
.bolt-textfield-error.bolt-textfield,
.bolt-textfield-error .bolt-textfield {
    border-color: $error-text;
}

.bolt-textfield-auto-adjust {
    overflow: hidden;
}

.bolt-textfield-auto-unresizable {
    resize: none;
}

.bolt-textfield-input {
    border: none;
    outline: none;
    background-color: inherit;
    padding: 5px $textFieldHorizontalPadding;
    resize: none;

    // Keep these separate otherwise the selector will be rejected
    // because at least one of the pseudo selectors will not be
    // known by the browser
    &::placeholder {
        color: $secondary-text;
    }
    &:-ms-input-placeholder {
        color: $secondary-text;
    }
    &::-ms-input-placeholder {
        color: $secondary-text;
    }
    &::-webkit-input-placeholder {
        color: $secondary-text;
    }
    &:-moz-placeholder {
        color: $secondary-text;
    }

    &::-ms-clear {
        display: none;
    }

    &:-moz-ui-invalid {
        box-shadow: none;
    }

    &.activatable {
        cursor: pointer;

        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &::-moz-selection {
            background: transparent;
        }
        &::selection {
            background: transparent;
        }
    }

    font-size: $fontSizeM;
    line-height: 20px;
}

.bolt-textfield-input-with-prefix {
    padding-left: $spacing-8;
}

.bolt-textfield-input-with-suffix {
    padding-right: $spacing-8;
}

.bolt-textfield-icon {
    font-size: $fontSizeML;
}

.bolt-textfield-no-text {
    color: $secondary-text;
}

.bolt-textfield-message {
    margin-top: $spacing-8;
    font-size: $fontSize;
    color: $secondary-text;
}

.bolt-textfield-message-error {
    color: $error-text;
}

.bolt-textfield-label {
    margin-bottom: $spacing-8;
}

.bolt-text-filterbaritem {
    background-color: transparent;
    border: none;
}

.bolt-text-filterbaritem-input {
    background-color: transparent;

    // Keep these separate otherwise the selector will be rejected
    // because at least one of the pseudo selectors will not be
    // known by the browser
    &::placeholder {
        color: $transblack-60;
    }
    &:-ms-input-placeholder {
        color: $transblack-60;
    }
    &::-ms-input-placeholder {
        color: $transblack-60;
    }
    &::-webkit-input-placeholder {
        color: $transblack-60;
    }
    &:-moz-placeholder {
        color: $transblack-60;
    }
}

.bolt-textfield-inline {
    background-color: $transblack-6;

    &:not(.disabled) {
        border-color: transparent;
    }

    .bolt-textfield-input {
        background-color: transparent;
    }

    &:hover:not(.disabled):not(.focused) {
        background-color: $transblack-10;
    }
}

.bolt-textfield-inline:hover:not(.disabled) {
    cursor: text;
}

.bolt-textfield-default-width {
    width: 296px;
}

.bolt-textfield-inline-tabbar-width {
    width: 244px;
}

.bolt-focus-visible .focused.focus-keyboard-only {
    border-color: $communication-background;
    @include box-shadow-focus-rect();
}