/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@import './input-statuses';
@import './input-sizes';
@import './input-shapes';

@mixin el-input-theme() {

  [elInput] {
    background-color: el-theme(input-background-color);
    border-color: el-theme(input-border-color);
    border-style: el-theme(input-border-style);
    border-width: el-theme(input-border-width);
    color: el-theme(input-text-color);
    font-family: el-theme(input-text-font-family);
    -webkit-appearance: none; // removes inner shadow on iOS

    @include el-component-animation(border, background-color, color, box-shadow);

    &::placeholder {
      color: el-theme(input-placeholder-text-color);
      font-family: el-theme(input-placeholder-text-font-family);
      text-overflow: ellipsis;
    }

    &:focus {
      outline: none;
      border-color: el-theme(input-focus-border-color);
      box-shadow: 0 0 0 el-theme(input-outline-width) el-theme(input-outline-color);
    }

    &:hover {
      border-color: el-theme(input-hover-border-color);
    }

    &:disabled {
      background-color: el-theme(input-disabled-background-color);
      border-color: el-theme(input-disabled-border-color);
      color: el-theme(input-disabled-text-color);

      &::placeholder {
        color: el-theme(input-disabled-placeholder-text-color);
      }
    }

    &.input-full-width {
      width: 100%;
    }

    @include input-statuses();
    @include input-sizes();
    @include input-shapes();
  }
}