/*
 *  Input
 *    Tools for various input types
 *
 * Dependencies:
 *    styles/settings/colors.scss
 *    styles/settings/animation.scss
 *    styles/tools/_box-shadow.scss
 *    styles/tools/_transform.scss
 *
 *  Version:
 *    1.0.0 - 2018/02/07
 */
@mixin t-placeholder() {
  &:moz-placeholder {@content;}
  &:ms-input-placeholder {@content;}
  &::placeholder {@content;}
  &::moz-placeholder {@content;}
  &::-webkit-input-placeholder {@content;}
}


$t-input--style-dp__padding: 1em;
//Basic Design
@mixin t-input--style($top, $bottom) {
  &::before,
  &:active &__inner {
    background: $bottom;
  }

  &__inner {
    background: $top;
  }
}

//I really hate that this has to be a mixin...
@mixin t-input--style-dp() {
  //Custom DomsPlace Input & Button Styling
  position: relative;
  display: inline-block;
  padding-bottom: $t-input--style-dp__padding / 2;

  //"Bottom" (Background)
  &::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50%;
    width: 100%;
    display: block;
    z-index: 0;

    background: $s-color--input-default__bottom;
    border: $s-color--input-default__border;
    border-radius: $t-input--style-dp__padding / 3;

    //Background Shadow (3D effect)
    @include t-box-shadow(
      0,
      $t-input--style-dp__padding/16,
      $t-input--style-dp__padding / 8,
      0,
      rgba(0, 0, 0, 0.1),
      true
    );
  }

  //Inner (either the text of the button or the input element itself)
  &__inner {
    position: relative;
    display: block;
    width: 100%;
    padding: $t-input--style-dp__padding / 2;

    background: $s-color--input-default__top;
    border: $s-color--input-default__border;
    transition: all 0.1s $s-animation--ease-out;
    border-radius: $t-input--style-dp__padding / 3;

    //Shine effect
    @include t-box-shadow(
      0,
      $t-input--style-dp__padding/8,
      $t-input--style-dp__padding/8,
      0,
      rgba(255,255,255, 0.4),
      true
    );
  }

  //Pseudo elements
  &:hover &__inner {
    @include t-translate-y($t-input--style-dp__padding / 8);
  }

  &:active &__inner {
    @include t-translate-y($t-input--style-dp__padding / 4);
  }

  &:focus::before,
  &__inner:focus {
    @include t-box-shadow(
      0,
      0,
      $t-input--style-dp__padding/8,
      $t-input--style-dp__padding/8,
      $s-color--input-focus__outline
    );
  }

  &::-moz-focus-inner,
  &__inner::-moz-focus-inner {
    border: 0;
  }

  //Styles
  &--style-primary {
    @include t-input--style(
      $s-color--input-primary__top,
      $s-color--input-primary__bottom
    );
  }

  //Secondary (Light Blue)
  &--style-secondary {
    @include t-input--style(
      $s-color--input-secondary__top,
      $s-color--input-secondary__bottom
    );
  }

  //Danger
  &--style-danger {
    @include t-input--style(
      $s-color--input-danger__top,
      $s-color--input-danger__bottom
    );
  }

  //Warning
  &--style-warning {
    @include t-input--style(
      $s-color--input-warning__top,
      $s-color--input-warning__bottom
    );
  }
}