// Inputs
// =============================================================================

@mixin reset-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  opacity: 0;
}

@mixin default-input-type {
  @include typography('title-2');
}

@mixin input-global (
  $input-class: 'input'
) {
  .#{$input-class} {
    -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
    border: 0;
    background: none;
    position: relative;
    width: 100%;
    height: 100%;
    font-family: inherit;
    color: color('white');
    border-bottom: 1px solid color('white');

    &:focus,
    &:active {
      outline: 0;
    }

    &__container--hidden {
      flex-basis: 0;
    }

    &__error {
      color: color('tomato');
    }

    &__tooltip-right,
    &__tooltip-bottom {
      display: inline-block;

      .#{$input-class}__error {
        align-items: center;
        color: palette('text');
        display: flex;
        margin-top: 30px;
        padding: 20px 20px 0;

        > [name='error'] {
          height: 100%;
          margin-right: 10px;
          padding-top: 0;
          width: 100px;
        }

        h4 {
          padding: 5px;

          &:first-of-type {
            font-weight: bold;
            letter-spacing: 0.15rem;
            text-transform: uppercase;
          }
        }

        &::after {
          border: 15px solid transparent;
          content: '';
          height: 0;
          position: absolute;
          width: 0;
        }
      }
    }

    &__tooltip-right {
      display: inline-block;

      .#{$input-class}__label {
        width: 100%;
      }

      .#{$input-class}__error {
        background: palette('background');
        border-right: 10px solid palette('error');
        height: 5rem;
        margin-left: 15px;
        position: absolute;
        right: 0;
        top: -300%;

        &::after {
          border-right-color: palette('background');
          border-left: 0;
          left: -15px; /* To the left of the tooltip */
          margin-left: 0;
          top: calc(50% - 15px);
        }
      }
    }

    &__tooltip-bottom {
      display: inline-block;

      .#{$input-class}__error {
        background: palette('light-background');
        border-left: 10px solid palette('error');
        height: 130px;
        position: relative;

        &::after {
          border-bottom-color: palette('light-background');
          border-top: 0;
          margin-left: -15px;
          margin-top: -15px;
          right: 5%;
          top: 0;
        }
      }
    }
  }
}

@mixin text-input (
  $text-class: 'text'
) {
  .#{$text-class} {
    @include default-input-type;

    -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
    border: 0;
    background: none;
    position: relative;
    width: 100%;
    height: 100%;
    font-family: inherit;
    color: color('white');
    border-bottom: 1px solid color('white');

    &:focus,
    &:active {
      outline: 0;

      & + * .#{$text-class}__label {
        transform: scale(0.6) translate(0, 60px);
      }
    }

    &__container {
      position: relative;
      margin: 3em 0;

      .#{$text-class}__label {
        @include default-input-type;
        opacity: 0.7;

        position: absolute;
        top: 0;
        left: 0;
        transition: scale 250ms ease-in-out, translate 250ms ease-in-out;
        transform: scale(1) translate(0, 0);
        transform-origin: left top 0;
        pointer-events: none;
        z-index: 1;
      }

      .input__label--active {
        transform: scale(0.6) translate(0, 60px);
      }
    }
  }
}

@mixin checkbox(
  $checkbox-class: 'checkbox',
  $checkbox-button-size: 2em
) {
  .#{$checkbox-class} {
    @include reset-input;
    cursor: pointer;

    &__container {
      position: relative;
      cursor: pointer;
    }

    &__label {
      position: static;
      cursor: pointer;
      padding-right: 1em;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        background: transparent;
        border: 1px solid color('white', 0.7);
        display: inline-block;
        width: $checkbox-button-size;
        height: $checkbox-button-size;
        margin-right: 1em;
        vertical-align: top;
        cursor: pointer;
        transition: all 250ms ease; //sass-lint:disable-line no-transition-all
      }
    }

    &:checked {
      + .#{$checkbox-class}__label {
        color: color('white');

        &::before {
          background-color: color('sea-green');
          box-shadow: inset 0 0 0 4px color('navy-taupe');
        }
      }
    }

    &:focus,
    &:hover {
      + .#{$checkbox-class}__label {
        &::before {
          outline: none;
          border-color: color('sea-green');
        }
      }
    }

    &:disabled {
      + .#{$checkbox-class}__label {
        &::before {
          box-shadow: inset 0 0 0 4px color('white');
          border-color: color('white', 0.7);
          background: color('white', 0.7);
        }
      }
    }
  }
}

@mixin radio(
  $radio-class: 'radio',
  $radio-button-size: 2em
) {
  .#{$radio-class} {
    @include reset-input;
    cursor: pointer;

    &-group__container {
      margin: 3em 0;
      position: relative;

      .input__tooltip-right {
        .input__error {
          top: -4rem;
        }
      }
    }

    &__container {
      position: relative;
    }

    &__label {
      display: flex;
      align-items: center;
      padding-right: 1em;
      color: color('white', 0.7);

      &::before {
        content: '';
        background: transparent;
        border-radius: 100%;
        border: 1px solid color('white', 0.7);
        display: inline-block;
        width: $radio-button-size;
        height: $radio-button-size;
        margin-right: 1em;
        vertical-align: top;
        cursor: pointer;
        transition: all 250ms ease; // sass-lint:disable-line no-transition-all
      }
    }

    &:checked {
      + .#{$radio-class}__label {
        color: color('white');

        &::before {
          background-color: color('sea-green');
          box-shadow: inset 0 0 0 4px color('navy-taupe');
        }
      }
    }

    &:focus,
    &:hover {
      + .#{$radio-class}__label {
        &::before {
          outline: none;
          border-color: color('sea-green');
        }
      }
    }

    &:disabled {
      + .#{$radio-class}__label {

        &::before {
          box-shadow: inset 0 0 0 4px color('white');
          border-color: color('white', 0.7);
          background: color('white', 0.7);
        }
      }
    }
  }
}

@mixin toggle(
  $toggle-class: 'toggle',
  $toggle-height: 2em,
  $switch-size: 2em
) {
  .#{$toggle-class} {
    @include reset-input;
    cursor: pointer;

    &-group {
      &__inputs {
        display: flex;
      }
    }

    &__container {
      margin: 3em 0;

      position: relative;
      padding-right: 1em;

      .input__label {
        position: static;
        cursor: pointer;
        margin: 0;
      }

      &--inline {
        .#{$toggle-class}__slider {
          display: inline-block;
          margin: 0.5em 1.5em 0 2em;
        }

        .input__label-wrapper {
          display: inline;
        }
      }
    }

    &__slider {
      height: $toggle-height * 0.5;
      width: $switch-size * 1.5;
      position: relative;
      margin: 0.5em 1em;
    }

    &__button {
      position: absolute;
      cursor: pointer;
      background-color: palette('input-background');
      border-radius: $toggle-height;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &::before {
        position: absolute;
        content: '';
        border-radius: 50%;
        height: $switch-size;
        width: $switch-size;
        left: $switch-size * -0.5;
        top: $switch-size * -0.25;
        background-color: palette('text');
        transition: 0.4s;
      }
    }

    &:checked + .#{$toggle-class}__slider {
      .#{$toggle-class}__button {
        background-color: color('sea-green');

        @each $color-name, $color-group in $-color-map {
          @include modifier($color-name) {
            background-color: color($color-name);
          }
        }

        &::before {
          transform: translateX($switch-size * 1.5);
        }
      }
    }
  }
}

@mixin context(
  $context-class: 'context'
) {
  .#{$context-class} {
    @include reset-input;
    cursor: pointer;


    &__container {
      position: relative;
      min-height: 100px;
      min-width: 100px;
      margin-right: unit(2);

      .input__label {
        position: static;
        cursor: pointer;
        margin: 0;
      }
    }

    &__button {
      @include typography('title-5');
      font-weight: 700;

      position: absolute;
      top: 0;
      left: 0;
      height: 100px;
      width: 100px;
      background-color: transparent;
      border-radius: 50%;
      padding: 2px;
      border: 3px solid var(--cat-color-seq-1);

      display: flex;
      justify-content: center;
      align-items: center;
      transition: all var(--animation-duration-standard) var(--animation-easing); //sass-lint:disable-line no-transition-all

      @for $i from 1 through 5 {
        &--cat-color-seq-#{$i} {
          border: 3px solid var(--cat-color-seq-#{$i});
        }
      }

      &::after {
        transition: all var(--animation-duration-standard) var(--animation-easing); //sass-lint:disable-line no-transition-all
        position: absolute;
        top: 6%;
        left: 6%;
        content: '';
        height: 88%;
        width: 88%;
        opacity: 0;
        border-radius: 50%;
      }

      span {
        z-index: 5;
        pointer-events: none;
      }
    }

    &:checked + .#{$context-class}__button,
    &:hover + .#{$context-class}__button {
      background-color: transparent;

      &::after {
        transition: all var(--animation-duration-standard) var(--animation-easing); //sass-lint:disable-line no-transition-all
        opacity: 1;
        background-color: var(--cat-color-seq-1);
      }

      @for $i from 1 through 5 {
        &--cat-color-seq-#{$i} {
          &::after {
            background-color: var(--cat-color-seq-#{$i});
          }
        }
      }
    }
  }
}

@if $export-ui-classes {
  @include input-global;
  @include text-input;
  @include checkbox;
  @include radio;
  @include toggle;
  @include context;
}