/// <reference path="../defaults" />
/// <reference path="variables_and_mixins" />

@import "../common/defaults";
@import "../common/mixins";
@import "../common/media_querys";

odisseia-input {
  width: 100%;
}

.odisseia-form {

  width: 100%;
  height: inherit;

  .input-container {
    min-height: 64px;
    padding: 2px 2px 18px;

    .placeholder {
      min-height: 14px;
      height: 14px;
      color: $color-light-text-primary;
      font-size: 14px;
      pointer-events: none;
      -webkit-font-smoothing: antialiased;
      padding-left: 2px;
      z-index: 1;
      -webkit-transform: translate3d(0, 30px, 0) scale(1);
      -moz-transform: translate3d(0, 30px, 0) scale(1);
      -ms-transform: translate3d(0, 30px, 0) scale(1);
      -o-transform: translate3d(0, 30px, 0) scale(1);
      transform: translate3d(0, 30px, 0) scale(1);

      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;

      -moz-transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
      -o-transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
      -webkit-transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
      transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
    }

    .input {
      color: $color-light-text-primary;
      -webkit-font-smoothing: antialiased;
      -moz-appearance: none;
      -webkit-appearance: none;
      background: none;
      padding: 4px 2px 4px 2px;
      border-width: 0 0 1px 0;
      border-color: $form-color-input-border-color;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      line-height: 16px;
      border-radius: 0;
      font-size: 16px;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      height: 38px;
      min-height: 38px;

      &[disabled] {
        border-width: 0;
      }
    }

    .validation {
      pointer-events: none;
      padding-left: 2px;
      z-index: 1;
      -webkit-font-smoothing: antialiased;
    }

    //states
    &.hasValue, &.focused {
      .placeholder {
        -webkit-transform: translate3d(0, 4px, 0) scale(0.75);
        -moz-transform: translate3d(0, 4px, 0) scale(0.75);
        -ms-transform: translate3d(0, 4px, 0) scale(0.75);
        -o-transform: translate3d(0, 4px, 0) scale(0.75);
        transform: translate3d(0, 4px, 0) scale(0.75);
      }
    }

    &.hasValue {
      .placeholder {
        color: $color-light-text-secondary;
      }
    }

    &.hasError {

      .placeholder {
        color: $color-danger !important;
      }

      .input {
        border-color: $color-danger !important;
      }
    }

    &.focused {

      .placeholder {
        color: $form-color-placeholder-focused;
      }

      .input {
        border-width: 0 0 2px 0;
        border-color: $form-color-input-border-color-focused;
      }
    }
  }

  &.no-border {

    &:focus {
      border-color: transparent;
      outline: 0;
      box-shadow: none;
    }
  }
}

:focus {
  outline: transparent none;
}