$class: ".ds-input";

%floating-label {
  ~ #{$class}__control-label {
    font-size: 0.75rem;
    color: $bleu_texte;
    top: 8px;
    left: 16px;
  }
}

%label-as-placeholder {
  ~ #{$class}__control-label {
    font-size: 1rem;
    color: $gris_dark;
    top: 16px;
    left: 16px;
  }
}

#{$class}-group {
  display: block;
  position: relative;
  margin-bottom: 8px;
  min-height: 56px + 18px + 8px;

  #{$class}__control-label {
    position: absolute;
    pointer-events: none;
    padding-left: 0.125rem;
    z-index: 1;
    font-weight: normal;
    transition: all 0.28s ease;
  }

  #{$class}__bar {
    position: relative;
    border-bottom: 0.0625rem solid $gris_dark;
    display: block;

    &::before {
      content: "";
      height: 0.125rem;
      width: 0;
      left: 50%;
      bottom: -0.0625rem;
      position: absolute;
      background: $bleu_texte;
      transition: left 0.28s ease, width 0.28s ease;
      z-index: 2;
    }
  }

  .message-aide,
  .message-erreur {
    display: none;
    font-size: 0.75rem;
    line-height: 1.0625rem;
    min-height: 1.0625rem;
    margin-left: 16px;
    margin-top: 8px;
  }

  .message-erreur {
    color: $rouge_negatif;
  }

  .message-aide {
    color: $gris_dark;
  }

  #{$class}__icon {
    position: absolute;
    height: 16px;
    width: 16px;
    font-size: 1rem;
    margin: auto;
    top: 0;
    bottom: 24px;
    right: 16px;
  }

  #{$class}__edition {
    display: none;
  }

  #{$class}__validation {
    display: none;

    &.dsicon-check {
      color: $vert_positif;
    }

    &.dsicon-close {
      color: $rouge_negatif;
    }
  }

  input#{$class} {
    padding: 20px 15px 5px 15px;
    //&:focus {
    //  outline: none;
    //}
  }

  #{$class},
  #{$class}-control {
    display: block;
    background: $gris_background;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    height: 56px;
    font-size: 1rem;
    border-width: 0;
    border-color: transparent;
    line-height: 1.9;
    width: 100%;
    color: $noir;
    transition: all 0.28s ease;
    box-shadow: none;

    // Default to label as placeholder
    @extend %label-as-placeholder;

    // Make label float on focus or if value
    &#{$class}--focused,
    &:not(#{$class}--undefined) {
      @extend %floating-label;
    }

    &#{$class}--disabled {
      pointer-events: none;
      background-color: $gris_background;

      ~ #{$class}__control-label,
      #{$class}__control-label {
        color: $gris_light;
      }

      ~ #{$class}__bar,
      #{$class}__bar {
        border-color: $gris_light;
      }

      ~ .message-aide {
        display: none;
      }

      ~ .message-erreur {
        display: none;
      }
    }

    &#{$class}--focused {
      background-color: $gris_light;
      //outline: none;
      color: $noir;

      ~ #{$class}__bar::before,
      #{$class}__bar::before {
        width: 100%;
        left: 0;
      }
    }

    &:not(#{$class}--error):not(#{$class}--valid) {
      &#{$class}--focused {
        ~ .message-aide {
          display: block;
        }
      }
    }

    &#{$class}--valid {
      ~ #{$class}__bar::before,
      #{$class}__bar::before {
        background: $vert_positif;
      }

      ~ #{$class}__control-label,
      #{$class}__control-label {
        color: $vert_positif;
      }

      ~ #{$class}__validation.dsicon-check {
        display: block;
      }

    }

    &#{$class}--error {
      ~ #{$class}__bar::before,
      #{$class}__bar::before {
        background: $rouge_negatif;
      }

      ~ #{$class}__control-label,
      #{$class}__control-label {
        color: $rouge_negatif;
      }

      ~ #{$class}__validation.dsicon-close {
        display: block;
      }

      ~ .message-erreur {
        display: block;
      }
    }
  }

}