// ********************************************
// container definition
$el-container: #{$prefix}-labeled-outline;
$el-container-error: #{$el-container}--error;
$el-container-disabled: #{$el-container}--disabled;
$el-container-read-only: #{$el-container}--readonly;

$required-mark: #{$prefix}-form-required-mark;
// ********************************************
// input controllers definition
$input-group: #{$prefix}-input-addon-group;
$input-controller:  #{$prefix}-input;
$button-controller:  #{$prefix}-button;
$textarea-wrapper: #{$prefix}-form-element-textarea-wrapper;
$datepicker-wrapper: #{$prefix}-datepicker;

// ********************************************
// local
$border-type: border-size(xs) solid;
$radius: $theme-base-border-radius;
$label-scale: 0.9;
$input-height: space(m) * 1.17;

// ********************************************
// elements
$el-outline: #{$el-container}__outline;
$el-outline-idle: #{$el-container}__idle;
$el-label: #{$el-container}__label;

@mixin opened_outline {
  .#{$el-outline} { opacity: 1 }
  .#{$el-outline-idle} { opacity: 0 }
  .#{$el-label} { transform: translateY(#{space(s) * -1}) translateX(0px) scale($label-scale); }
  .floating-label-input-controller {
    opacity: 1;
    z-index: 3;
    &:not(.#{$input-group}) {
      opacity: 1;
    }
    &.#{$input-group} > *:not(.#{$input-group}__addon){
      opacity: 1;
    }
    .#{$input-controller} {
      background: transparent;
    }

    &.#{$datepicker-wrapper}{
      .#{$input-controller} {
        border:none;
      }
      .#{$button-controller}, .#{$button-controller}:hover{
        background: none;
        border:none;
        position: relative;
        &:before {
          content: '';
          position: absolute;
          height: 80%;
          top: 10%;
          left: 0;
          width: calc(#{space(xxs)} * 0.25);
          background: color(neutral, 200);
          pointer-events: none;
          border: none;
        }
      }
    }
  }
}


.#{$el-container} {
  position: relative;
  color: color(neutral, 500);
  margin-top: space(xs);
  //height: $input-height;
  display: flex;
  align-items: center;
  z-index: 2;
  &:focus-within,
  &:hover {
    @include opened_outline;
    .#{$el-outline} svg, svg:not([fill]) {
      .#{$el-outline}__path {
        stroke: color(brand-primary, 600);
      }
    }
  }

  .input-date-input > .em-ds-input{
    box-shadow: none;
    border: none;
  }

  .#{$textarea-wrapper}{
    padding-top: space(xxs);
  }
  .#{$input-group}{
    width: 100%;
  }

  &:focus-within {
    .#{$el-outline} svg, svg:not([fill]) {
      filter: drop-shadow(0px 0px 2px color(brand-primary, 600));

      .#{$el-outline}__path {
        stroke: color(brand-primary, 600);
      }
    }
  }

  .floating-label-input-controller {
    position: relative;
    background: transparent;
    border: none;
    width: 100%;
    transition: duration(base) easing(base);

    &:not(.#{$input-group}),
    &.#{$input-group} > *:not(.#{$input-group}__addon)
    {
      opacity: 0;
    }

    > input, textarea {
      background: transparent;
    }

    &:focus-within {
      @include opened_outline;
    }
    .em-ds__control--is-focused {
      border: none !important;
    }

    // TODO: review this
    div {
      border: none;
    }

    &:focus-within, * {
      box-shadow: none;
    }
  }

  &--has-value {
    @include opened_outline;
    .#{$required-mark}{
      bottom: space(xxs);
    }
  }
}

.#{$el-outline} {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity duration(fast) easing(base), border-color duration(fast) easing(base);
  background-color: color(neutral, 000);
  svg, svg:not([fill]) {
    width: 100%;
    height: 100%;
  }
}

.#{$el-outline-idle} {
  @include border-radius($radius);
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity duration(fast) easing(base), border-color duration(fast) easing(base);
  opacity: 1;
  border: $border-type color(neutral, 200);
}


.#{$el-outline}__path {
  stroke-width: 1px;
  transition: stroke duration(fast) easing(base), stroke-width duration(fast) easing(base);
  fill: transparent;
  stroke: color(neutral, 200);
}

.#{$el-label} {
  position: absolute;
  z-index: 1;
  margin: 0 space(xs);
  left: 0;
  top: space(xs);
  transition: all duration(fast) easing(base), border-color duration(fast) easing(base);
}

.#{$el-container}--disabled {
  * {
    cursor: not-allowed;
  }
  .#{$el-outline}__path {
    stroke: color(neutral, 100);
  }
  .#{$el-outline-idle} {
    border-color: color(neutral, 100);
  }
  .#{$el-label}{
    color: color(neutral, 500);
  }
}

.#{$el-container}--readonly {
  * {
    cursor: not-allowed;
  }

  .#{$el-outline}__path {
    stroke: color(neutral, 100);
  }
  .#{$el-outline-idle} {
    border-color: color(neutral, 100);
  }
  .#{$el-label}{
    color: color(neutral, 500);
  }
}

.#{$el-container}--error {
  input {
    &:focus {
      ~ .#{$el-outline} svg{
        filter: drop-shadow(0px 0px 2px color(danger, 900));
      }
    }
  }
  .#{$el-outline}__path {
    stroke: color(danger, 900);
  }
  .#{$el-outline-idle} {
    border-color: color(danger, 900);
  }
}