/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *       inputs sass file
 *  ----------- *** ------------
 *
 */


@import "inputs_variables";



.sn-form__container {
  position: relative;
  background: $default-form-group-container-background;
  width: auto;
  padding: $default-form-group-container-paddings;
  border-radius: $default-border-radius;
  @include shadow-2dp();
}



// Form Group

.sn-form-group {
  @include clearfix();
  position: relative;
  margin: $default-form-group-margin;

  .sn-form-group__label {
    display: block;
    font-size: $default-form-label-font-size;
    color: $default-form-label-color;
    padding: $default-form-label-padding;
    top: -$default-form-label-padding;
    left: 0;

    &.sn-form-group__label--disabled {
      color: $default-form-group-label-disabled-color;
    }
  }

  .sn-input {
    margin-bottom: 0;
  }
}



// SELECT

.sn-select {
  position: relative;
  select {
    width: 100%;
    font-size: $default-select-font-size;
    height: $default-select-height;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    line-height: $default-select-line-height;
    box-shadow: none;
  }
}


// INPUT & TEXTAREA

.sn-input {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 32px;
  input {
    height: $default-input-height;
    &:disabled {
      cursor: not-allowed;
      ~ .sn-field__bar {
        border-bottom: $default-input-field-bar-border-bottom-size dashed $default-form-bar-color-disabled;
      }
    }
  }
  input,
  textarea {
    display: block;
    background: none;
    padding: $default-input-padding;
    font-size: $default-input-font-size;
    border-width: 0;
    border-color: transparent;
    line-height: $default-input-line-height;
    width: 100%;
    color: transparent;
    box-shadow: none;
  }
  textarea {
    margin-top: $default-textarea-margin-top;
    margin-bottom: $default-textarea-margin-bottom;
    line-height: $default-textarea-line-height;
    resize: none;
  }
  input[type="file"] {
    line-height: $default-input-line-height;
    ~ .sn-field__bar {
      display: none;
    }
  }
  .sn-field__text {
    display: block;
    color: $color-black;
    height: $default-input-field-text-height;
    padding: $default-input-padding;
    padding-top: $default-input-field-text-top-position;
    line-height: $default-input-line-height;
    width: 100%;
    font-size: $default-input-font-size;
    background: none;
  }
  .sn-field__addon {
    display: none;
    position: absolute;
    top: $default-input-field-addon-top-position;
    color: $default-form-input-addon-color;
    pointer-events: none;
  }
  &.sn-input__addon.sn-input__addon--left,
  &.sn-input__addon--left {
    padding-left: $default-input-addon-padding;
    width: calc(100% - 20px);
    .sn-field__addon {
      display: inline-block;
      left: 0;
    }
  }
  &.sn-input__addon.sn-input__addon--right,
  &.sn-input__addon--right {
    padding-right: $default-input-addon-padding;
    width: calc(100% - 20px);
    .sn-field__addon {
      display: inline-block;
      right: 0;
    }
  }
  &.sn-input--text {
    .sn-field__bar{
      display: none;
    }
  }
  &.sn-input--dropdown {
   .sn-dropdown {
     height: 34px;
     line-height: $default-input-line-height;
     border-bottom: $default-input-field-bar-border-bottom-size solid $default-form-bar-color;
     .sn-dropdown__button {
       border-bottom: 0;
       padding-left: 1px;
     }
     .sn-dropdown__results {
       border-top: 0;
     }
     &.sn-dropdown--box {
       height: 34px;
       border-bottom: 0;
       .sn-dropdown__button {
         height: 32px;
         padding: 0px 5px 0px 8px;
         margin-top: 4px;
         border: 1px solid $palette-grey-300;
         &:after {
           padding-top: 6px;
         }
       }
       .sn-dropdown__results {
         margin-top: 1px;
       }
     }
     &.has-error {
       border-bottom: 2px solid $default-form-group-color-message-error;
       &.sn-dropdown--box .sn-dropdown__button {
         border: 2px solid $default-form-group-color-message-error;
       }
     }
     &.has-warning {
       border-bottom: 2px solid $default-form-group-color-message-warning;
       &.sn-dropdown--box .sn-dropdown__button {
         border: 2px solid $default-form-group-color-message-warning;
       }
     }
   }
   .sn-field__bar {
     display: none;
   }
  }
}

.sn-input,
.sn-select {
  margin: $default-input-select-margin;
  select,
  input:focus,
  input.form-file,
  input.has-value,
  textarea:focus,
  textarea.form-file,
  textarea.has-value {
    color: $default-form-input-color;
    ~ .sn-field__label {
      font-size: $default-form-label-font-size-floating-focus;
      color: $default-form-label-color;
      top: $default-form-label-font-size-floating-position-top;
      left: 0;
    }
  }

  select,
  input,
  textarea {
    &:focus {
      outline: none;
      ~ .sn-field__label {
        color: $default-form-label-color-focus;
      }
      ~ .sn-field__bar {
        &::before {
          width: 100%;
          left: 0;
        }
      }
    }
  }
}


// RADIO

.sn-radio {
  margin: $default-radio-checkbox-margin;

  .sn-input__icon {
    position: absolute;
    top: $default-input-icon-position-top;
    left: $default-input-icon-position-left;
    cursor: pointer;
    display: block;
    font-size: $default-input-icon-font-size;
    user-select: none;
    color: $default-form-input-icon-border-color;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: $default-input-icon-border-top-position;
      left: 0;
      margin: $default-input-icon-margin;
      width: $default-input-icon-size;
      height: $default-input-icon-size;
      transition: transform $default-form-animation-transition ease;
      border-radius: 50%;
      border: $default-input-icon-border-size solid currentColor;
    }

    &::after {
      transform: scale(0);
      background-color: $default-form-input-icon-color-focus;
      border-color: $default-form-input-icon-color-focus;
    }
  }

  // scss-lint:disable QualifyingElement, NestingDepth
  input:checked {
    ~ .sn-input__icon {
      &::after {
        transform: scale(0.5);
      }
      &::before {
        color: $default-form-input-icon-color-focus;
      }
    }
  }
}

// CHECKBOX

.sn-checkbox {
  // scss-lint:disable QualifyingElement
  margin: $default-radio-checkbox-margin;

  .sn-input__icon {
    position: absolute;
    top: $default-input-icon-border-top-position;
    left: 0;
    width: $default-input-icon-size;
    height: $default-input-icon-size;
    color: $default-form-input-icon-border-color;
    border: $default-input-icon-border-size solid $default-form-input-icon-border-color;
    border-radius: $default-border-radius;
    transition: border-color $default-form-animation-transition ease;

    &::before,
    &::after {
      content: '';
      position: absolute;
      display: block;
      width: $default-checkbox-icon-sign-size;
      height: 0;
      background-color: $default-form-input-icon-color-focus;
      border-radius: $default-checkbox-icon-sign-border-radius;
      transition: opacity $default-form-animation-transition ease,height 0s linear $default-form-animation-transition;
      transform-origin: left top;
      opacity: 0;
    }

    &::before {
      background-color: $default-form-input-icon-done-sign-color;
      border: 0;
      top: $default-checkbox-icon-sign-before-top;
      left: $default-checkbox-icon-sign-before-left;
      transform: rotate(-135deg);
    }

    &::after {
      background-color: $default-form-input-icon-done-sign-color;
      top: $default-checkbox-icon-sign-after-top;
      left: $default-checkbox-icon-sign-after-left;
      transform: rotate(-45deg);
    }
  }

  input:checked {
    ~ .sn-input__icon {
      background-color: $default-form-input-icon-color-focus;
      border-color: $default-form-input-icon-color-focus;

      &::after,
      &::before {
        opacity: 1;
        transition: height $default-form-animation-transition-checkbox-icon ease;
      }

      &::after {
        height: $default-checkbox-icon-sign-after-size;
      }

      &::before {
        height: $default-checkbox-icon-sign-before-size;
        transition-delay: .05s;
      }
    }
  }
}

.sn-checkbox,
.sn-radio {
  label {
    position: relative;
    padding: $default-radio-checkbox-label-padding;
    text-align: left;
    cursor: pointer;
    color: $default-form-input-color;
  }
  input {
    position: absolute;
    left: 0;
    width: auto;
    opacity: 0.00000001;
  }
}

.sn-radio + .sn-radio,
.sn-checkbox + .sn-checkbox {
  margin: $default-radio-checkbox-siblings-margin;
}


// FIELD LABEL

.sn-field__label {
  position: absolute;
  width: 100%;
  top: $default-form-label-position-top;
  padding-left: $default-form-label-padding-left;
  color: $default-form-label-color-floating;
  font-size: $default-form-label-font-size-floating;
  font-weight: normal;
  transition: all $default-form-animation-transition ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;

  &.sn-field__label--fixed {
    display: block;
    top: $default-form-label-fixed-position-top;
    left: 0;
    font-size: $default-form-label-font-size;
    color: $default-form-label-color;
    padding: 0 inherit;
  }
}


// FIELD BAR

.sn-field__bar {
  position: relative;
  border-bottom: $default-input-field-bar-border-bottom-size solid $default-form-bar-color;
  display: block;

  &::before {
    content: '';
    position: absolute;
    bottom: $default-input-field-bar-position-bottom;
    height: $default-input-field-bar-height;
    width: 0;
    left: 50%;
    background: $default-form-bar-color-focus;
    transition: left $default-form-animation-transition ease, width $default-form-animation-transition ease;
    //z-index: 2;
  }
}




// ERROR MESSAGES


.sn-form-group__message,
.sn-field__counter {
  display: none;
  padding: $default-form-group-message-padding;
  font-size: $default-form-group-message-font-size;
  line-height: $default-form-group-line-height;
}

.sn-field__counter {
  display: block;
}

.sn-form-group__message + .sn-form-group__message {
  padding-top: 0 !important;
}

.sn-form-group.has-error,
.sn-input.has-error,
.sn-select.has-error {
  .sn-form-group__message {
    display: block;
    color: $default-form-group-color-message-error !important;
  }
  .sn-field__label,
  .sn-form-group__label {
    color: $default-form-group-color-message-error !important;
  }
  .sn-field__bar{
    &::before {
      background: $default-form-group-color-message-error !important;
      left: 0;
      width: 100%;
    }
  }
}

.sn-form-group.has-warning,
.sn-input.has-warning,
.sn-select.has-warning {
  .sn-form-group__message {
    display: block;
    color: $default-form-group-color-message-warning !important;
  }
  .sn-field__label,
  .sn-form-group__label {
    color: $default-form-group-color-message-warning !important;
  }
  .sn-field__bar{
    &::before {
      background: $default-form-group-color-message-warning !important;
      left: 0;
      width: 100%;
    }
  }
}

.sn-form-group.has-info,
.sn-input.has-info,
.sn-select.has-info {
  .sn-form-group__message {
    display: block;
    color: $default-form-group-color-message-info !important;
  }
  .sn-field__label,
  .sn-form-group__label {
    color: $default-form-group-color-message-info !important;
  }
  .sn-field__bar{
    &::before {
      background: $default-form-group-color-message-info !important;
      left: 0;
      width: 100%;
    }
  }
}


// INPUT RANGE

.sn-input input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 0 8px 0;
  height: 14px;
  ~ .sn-field__bar {
    display: none;
  }
}

@mixin input-range-button() {
  border: 0 solid transparent;
  height: $default-form-group-input-range-size;
  width: $default-form-group-input-range-size;
  border-radius: 50%;
  background: $default-form-group-input-range-button-color;
  cursor: pointer;
}
@mixin input-range-runnable-track() {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: $default-form-group-input-range-bar;
  border-radius: 0px;
  border: 0px solid #000001;
}

.sn-input input[type=range]:focus {
  outline: none;
}
.sn-input input[type=range]::-webkit-slider-thumb {
  @include input-range-button();
  -webkit-appearance: none;
  margin-top: -6px;
  transition: all .1s linear;
}
.sn-input input[type=range]::-moz-range-thumb {
  @include input-range-button();
}
.sn-input input[type=range]::-ms-thumb {
  @include input-range-button();
}
.sn-input input[type=range]:active::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  margin-top: -10px;
}
.sn-input input[type=range]:focus::-webkit-slider-thumb {
  background-color: $default-form-group-input-range-button-hover-color;
}
.sn-input input[type=range]::-webkit-slider-runnable-track {
  @include input-range-runnable-track();
}
.sn-input input[type=range]::-moz-range-track {
  @include input-range-runnable-track();
}
.sn-input input[type=range]:active::-webkit-slider-runnable-track {
  background: $default-form-group-input-range-bar;
}
.sn-input input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.sn-input input[type=range]::-ms-fill-lower {
  background: #bbbbbb;
  border: 0px solid #000001;
  border-radius: 0px;
}
.sn-input input[type=range]::-ms-fill-upper {
  background: $default-form-group-input-range-bar;
  border: 0px solid #000001;
  border-radius: 0px;
}
.sn-input input[type=range]:active::-ms-fill-lower {
  background: $default-form-group-input-range-bar;
}
.sn-input input[type=range]:active::-ms-fill-upper {
  background: #d5d5d5;
}


.sn-input,
.sn-select,
.sn-form-group__label {
  .sn-tooltips {
    position: absolute;
    right: 0;
    top: $default-input-tooltip-top-position;
    color: $default-form-input-tooltip-icon-color;
    .material-icons {
      font-size: $default-input-tooltip-icon-font-size;
      &:hover {
        cursor: default;
      }
    }
  }
}

.sn-form-group__label {
  .sn-tooltips {
    top: 4px;
  }
  &--tooltip-right {
    .sn-tooltips {
      position: absolute;
      right: 0;
    }
  }
  &--tooltip-left {
    .sn-tooltips {
      position: relative;
      left: 8px;
    }
  }
}

.sn-input__meter-box {
  // line-height: 8px;
  font-size: 12px;
}

meter::-webkit-meter-bar {background: grey;}
meter::-webkit-meter-optimum-value {background: $default-form-input-meter-color-very-strong;}
meter::-webkit-meter-suboptimum-value{background:$default-form-input-meter-color-medium;}
meter::-webkit-meter-even-less-good-value{background:$default-form-input-meter-color-weak;}

meter::-moz-meter-bar {background: $default-form-input-meter-color-weak;}
meter::-moz-meter-optimum-value {background: $default-form-input-meter-color-very-strong;}
meter::-moz-meter-suboptimum-value{background:$default-form-input-meter-color-medium;}