@import '@hh.ru/design-tokens/build/less/variables';
@import '_abstract-control';

@control-placeholder-color: @color-gray-40;

.abstract-control-text() {
    background-color: @control-background-color;

    &::-webkit-input-placeholder {
        color: @control-placeholder-color;
    }

    &::-moz-placeholder {
        color: @control-placeholder-color;
    }

    &:-ms-input-placeholder {
        color: @control-placeholder-color;
    }

    &::placeholder {
        color: @control-placeholder-color;
    }
}

.abstract-control-text-input() {
    /* line-height необходима для того, чтобы мобильные firefox и chrome корректно отрисовывали поле.
       Если убрать, то отображение текста в поле будет приклеено к верху. другой способ задачи не прокатывает */
    line-height: @control-height-scale-medium - @control-border-width * 2;

    border-radius: @bloko-border-radius-data-entry;

    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration,
    &::-webkit-search-results-decoration,
    &::-webkit-search-results-button {
        display: none;
    }

    /* Отключаем кнопку для автокомплита из книги контактов в Safari */
    &[autocomplete='off']::-webkit-contacts-auto-fill-button {
        visibility: hidden;
        pointer-events: none;
        height: 0;
        width: 0;
        margin: 0;
    }

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

    /* Отключаем кнопки плюс/минус в контролах с type=number */
    &[type='number'] {
        -moz-appearance: textfield;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }

    /* В webkit\blink desktop браузерах отключаем нативные кнопки календарей,
      очищения поля и селекта у input[type=date | time | month] */
    &[type='date'],
    &[type='time'],
    &[type='month'] {
        &::-webkit-clear-button,
        &::-webkit-inner-spin-button,
        &::-webkit-calendar-picker-indicator {
            display: none;
        }
    }
}

.abstract-control-text-input-scale-small() {
    line-height: @control-height-scale-small;
    height: @control-height-scale-small;
}

.abstract-control-text-input-scale-large() {
    .bloko-text-large();

    line-height: @control-height-scale-large;
    padding: 0 @control-padding-horizontal-large;
    height: @control-height-scale-large;
}