/*!
 * Float Labels
 *
 * @version: 3.3.2
 * @author: Paul Ryley (http://geminilabs.io)
 * @url: https://geminilabs.github.io/float-labels.js
 * @license: MIT
 */
@function fl($value) {
  @return map-get(map-merge($float-labels-defaults, $float-labels), $value);
}

@mixin fl-style-1 {
  input.#{fl(prefix)}input,
  select.#{fl(prefix)}select,
  textarea.#{fl(prefix)}textarea {
    padding: fl(base-padding) fl(base-padding)*2;
  }
  select.#{fl(prefix)}select {
    height: fl(base-height) + fl(base-padding)*2 + fl(border-width)*2;
  }
  .#{fl(prefix)}is-active input.#{fl(prefix)}input,
  .#{fl(prefix)}wrap-select select.#{fl(prefix)}select,
  .#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
    padding: fl(base-padding) fl(base-padding)*2;
  }
  label.#{fl(prefix)}label {
    top: 0;
    transform: translateY(fl(border-width) - 8px);
    left: fl(border-width) + fl(base-padding)*1.5;
    background-color: transparent;
    padding: fl(base-padding)*2 fl(base-padding)/2;
    text-shadow:
            -1px -1px 0 fl(color-background),
            1px -1px 0 fl(color-background),
            -1px 1px 0 fl(color-background),
            1px 1px 0 fl(color-background);
  }
  label.#{fl(prefix)}label:before {
    content: '';
    display: block;
    position: absolute;
    top: fl(border-width) + fl(base-padding) + fl(font-size-small);
    left: 0;
    right: 0;
    height: fl(border-width);
    background-color: fl(color-background);
    z-index: -1;
  }
  $label-top: round((fl(base-padding) + fl(font-size-small))/2);
  .#{fl(prefix)}wrap-select label.#{fl(prefix)}label,
  .#{fl(prefix)}is-active label.#{fl(prefix)}label {
    transform: translateY(- $label-top);
    padding: fl(base-padding)/2;

    &[for="street_2"] {
      opacity: 0;
    }
  }
  .#{fl(prefix)}wrap-select label.#{fl(prefix)}label:before,
  .#{fl(prefix)}is-active label.#{fl(prefix)}label:before {
    top: $label-top;
  }
}

@mixin fl-style-2 {
  input.#{fl(prefix)}input,
  select.#{fl(prefix)}select,
  textarea.#{fl(prefix)}textarea {
    padding: fl(base-padding)*2;
  }
  select.#{fl(prefix)}select {
    height: fl(base-height) + fl(base-padding)*4 + fl(border-width)*2;
  }
  .#{fl(prefix)}is-active input.#{fl(prefix)}input,
  .#{fl(prefix)}wrap-select select.#{fl(prefix)}select,
  .#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
    padding: fl(base-padding)*3 fl(base-padding)*2 fl(base-padding)*1;
  }
  label.#{fl(prefix)}label {
    top: 0;
    transform: fl(border-width);
    left: fl(border-width) + fl(base-padding)*1.5;
    padding: fl(base-padding) fl(base-padding)/2 fl(base-padding)/2;

    &[for="street_2"] {
      opacity: 0;
    }
  }
  .field._required .#{fl(prefix)}wrap,
  .field.required .#{fl(prefix)}wrap{
    &:before {
      padding-top: fl(base-padding)*2;
    }
  }
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}wrap {
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &.#{fl(prefix)}is-active,
  &.#{fl(prefix)}wrap-select {
    margin-top: fl(font-size-small);
  }
}

#{fl(parent)}.#{fl(prefix)}form input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form textarea.#{fl(prefix)}textarea {
  width: 100%;
  outline: 0;
  font-size: fl(font-size);
  line-height: fl(line-height);
  border-radius: fl(border-radius);
  border: fl(border-width) solid fl(color-border);
  background-color: fl(color-background);
  box-sizing: border-box;
  transition: all fl(transition-speed) fl(transition-easing);

  &:-moz-placeholder {
    color: fl(color-placeholder);
  }
  &::-moz-placeholder {
    color: fl(color-placeholder);
  }
  &:-ms-input-placeholder {
    color: fl(color-placeholder);
  }
  &::-webkit-input-placeholder {
    color: fl(color-placeholder);
  }
}

#{fl(parent)}.#{fl(prefix)}form select.#{fl(prefix)}select {
  position: relative;
  color: fl(color-placeholder);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
  color: fl(color-text);
  background-color: fl(color-background-active);

  &:not(.mage-error):not(.valid) {
    border-color: fl(color-border-active);
  }
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus textarea.#{fl(prefix)}textarea {
  background-color: fl(color-background-focus);
  border-left-width: fl(width-border-focus-highlight);

  &:not(.mage-error):not(.valid) {
    border-color: fl(color-border-focus);
    border-left-color: fl(color-border-focus-highlight);
  }
}

#{fl(parent)}.#{fl(prefix)}form label.#{fl(prefix)}label {
  opacity: 0;
  visibility: hidden;
  display: block;
  position: absolute;
  top: 0;
  transform: translateY(- fl(font-size-small));
  left: 0;
  font-size: fl(font-size-small);
  font-weight: fl(font-weight);
  line-height: 1;
  color: fl(color-placeholder);
  border-radius-top-left: fl(border-radius);
  transition: opacity fl(transition-speed) fl(transition-easing) 0.02s,
    visibility fl(transition-speed) fl(transition-easing),
    transform fl(transition-speed) fl(transition-easing);
  z-index: 1;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}wrap-select label.#{fl(prefix)}label,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active label.#{fl(prefix)}label {
  opacity: 1;
  visibility: visible;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus label.#{fl(prefix)}label {
  color: fl(color-text-focus);
}
@mixin requiredIndicator() {
  opacity: 1;
  content: '*';
  display: block;
  position: absolute;
  top: fl(border-width);
  right: fl(base-height)/2 + fl(base-padding)/2;
  font-size: fl(font-size);
  line-height: 1.75;
  color: fl(color-required);
  transition: all fl(transition-speed) fl(transition-easing);
  padding: fl(base-padding) 0 0;
  z-index: 1;
}


#{fl(parent)}.#{fl(prefix)}form .field._required,
#{fl(parent)}.#{fl(prefix)}form .field.required{

  .#{fl(prefix)}wrap:before {
    @include requiredIndicator();
  }

  .field.additional:not(._required),
  .field.additional:not(.required) {
    .#{fl(prefix)}wrap:before {
      display: none;
    }
  }

  .#{fl(prefix)}select.#{fl(prefix)}select {
    background-position-x: calc(100% - 12px);
    padding-right: 60px;
  }
}

.checkout-shipping-address .street.required .field._required {
  position: relative;

  &:before {
    @include requiredIndicator();
  }
}

#{fl(parent)}.#{fl(prefix)}form .field._required .#{fl(prefix)}wrap.#{fl(prefix)}is-active:before,
#{fl(parent)}.#{fl(prefix)}form .field._required .#{fl(prefix)}wrap.#{fl(prefix)}wrap-select:before,
#{fl(parent)}.#{fl(prefix)}form .field.required .#{fl(prefix)}wrap.#{fl(prefix)}is-active:before {
  opacity: 0;
}

#{fl(parent)}.#{fl(prefix)}form.#{fl(prefix)}style-1 {
  @include fl-style-1;
}

#{fl(parent)}.#{fl(prefix)}form.#{fl(prefix)}style-2 {
  @include fl-style-2;
}
