/**
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

@mixin cu-form($background-color, $text-color , $light: false, $opacity: 0.7) {

  &.cu-form-padding {
    padding: 10px;
  }

  .cu-form-row {

    .cu-form-label {
      @include cu-text-shadow;
      color: $text-color;
      margin-bottom: 2px;
      padding-left: 1px;
      cursor: pointer;
      font-weight: 600;
    }

    .cu-form-text {
      width: 100%;
      position: relative;
      @include before-after-defaults;
      &:before {
        background: $background-color;
        border-radius: 3px;
      }
      input[type=text],
      input[type=email],
      input[type=password],
      input[type=number],
      input[type=search],
      input[type=url] {
        color: $text-color;
        width: 100%;
        background: none;
        border: none;
        padding: 3px 5px;
        border-radius: 3px;
      }
      input[type=search] {
        width: calc(100% - 12px);
      }
    }

    .cu-form-select {
      width: 100%;
      position: relative;
      @include before-after-defaults;
      &:before {
        background: $background-color;
        border-radius: 3px;
      }
      &:after {
        content: "\25BC";
        height: 1em;
        font-size: .625em;
        line-height: 1;
        left: auto;
        right: 1em;
        top: 50%;
        margin-top: -.5em;
        position: absolute;
        pointer-events: none;
        color: $color-gray-light;
      }
      select {
        color: $text-color;
        width: 100%;
        background: none;
        border: none;
        padding: 3px 5px;
        border-radius: 3px;
        cursor: pointer;
        @include appearance(none);
        option, optgroup {
          background: $background-color;
          padding: 3px 5px;
          outline-color: $color-yellow-dark;
          border: none;
          cursor: pointer;
        }
      }
    }

    .cu-form-range {
      width: 100%;
      position: relative;
      height: 10px;
      margin-bottom: 15px;
      input[type=range] {
        @include appearance(none);

        $color: if($light,  $color-gray-dark, $background-color);

        color: $text-color;
        width: 100%;
        background: none;
        height: 10px;
        border-left: 3px solid $color;
        border-right: 3px solid $color;
        border-radius: 5px;
        &::-webkit-slider-runnable-track {
          width: 100%;
          height: 3px;
          background: $color;
          border: none;
          border-radius: 3px;
        }
        &::-webkit-slider-thumb {
          @include appearance(none);
          width: 10px;
          height: 10px;
          cursor: -webkit-grab;
          margin-top: -4px;
          border-radius: 50%;
          background: $color-yellow-dark;
          &:active {
            cursor: -webkit-grabbing;
          }
        }
        &:before {
          content: attr(value);
          left: 0;
          right: 0;
          position: absolute;
          text-align: center;
          top: 10px;
        }
        &.no-value {
          &:before {
            content: ' ';
          }
        }
        &:active, &:focus, &:hover {
          &::-webkit-slider-thumb {
            background: $color-yellow-light;
          }
        }
        &:focus::-webkit-slider-runnable-track {
          background: $color;
        }
      }
    }

  }

  // Form Row Spacing
  .cu-form-row:not(:first-child) {
    margin-top: 10px;
  }

  // Transparent Inputs
  &.cu-form-transparent {
    .cu-form-row {
      .cu-form-text {
        &:before {
          opacity: $opacity;
        }
        input[type=text],
        input[type=email],
        input[type=password],
        input[type=number],
        input[type=search],
        input[type=url] {
          @if ($light) {
            box-shadow: inset 0 0 5px 0 rgba(0,0,0, 0.7);
          } @else {
            box-shadow: inset 0 0 5px 1px rgba(0,0,0, 0.75);
          }
          @include placeholder {
            @if ($light) {
              color: lighten($text-color, 30%);
            }
          }
        }
      }
      .cu-form-select {
        &:before {
          opacity: $opacity;
        }
        select {
          @if ($light) {
            box-shadow: inset 0 0 5px 0 rgba(0,0,0, 0.7);
          } @else {
            box-shadow: inset 0 0 5px 1px rgba(0,0,0, 0.75);
          }
        }
      }
      .cu-form-range {
        input[type=range] {

          $color: if($light,  $color-gray-dark, $color-dark);

          border-left: 3px solid $color;
          border-right: 3px solid $color;
          &::-webkit-slider-runnable-track {
            background: $color;
          }
          &:focus::-webkit-slider-runnable-track {
            background: $color;
          }
        }
      }
    }
  }

  // Light Adjustments
  @if ($light) {
    .cu-form-row {
      .cu-form-label {
        text-shadow: none;
      }
      .cu-form-text {
        text-shadow: none;
        input[type=text],
        input[type=email],
        input[type=password],
        input[type=number],
        input[type=search],
        input[type=url] {
          text-shadow: none;
        }
      }
      .cu-form-select {
        text-shadow: none;
        select {
          text-shadow: none;
        }
      }
      .cu-form-range {
        text-shadow: none;
        input[type=range] {
          text-shadow: none;
        }
      }
    }
  }

  // Input Outline Color
  * {
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=number],
    input[type=search],
    input[type=url],
    select {
      &:active, &:hover, &:focus {
        outline-color: $color-yellow-dark;
      }
    }
    input[type=range] {
      outline-color: rgba(0, 0, 0, 0);
    }
  }

  // Sizes
  &.cu-form-xs {
    * {
      font-size: $font-size-xs;
    }
  }
  &.cu-form-sm {
    * {
      font-size: $font-size-sm;
    }
  }
  &.cu-form-lg {
    * {
      font-size: $font-size-lg;
    }
  }

}

.cu-form-dark {
  @include cu-form($background-color: #333, $text-color: $color-light, $light: false);
}

.cu-form-light {
  @include cu-form($background-color: $color-light, $text-color: $color-gray-dark, $light: true);
}

.cu-form-clickthrough {
  pointer-events: none;
}