@import "../../scss/xmat-vars";
@import "../../scss/xmat-mixins";

$error-color: map-get($xmat-colors, red);
$easing: cubic-bezier(.25, .8, .25, 1);

xmat-input {
  display: inline-block; // FIXES IE
}

mat-form-field {
  span.mat-form-field-label-wrapper label,
  span.xmat-time-colon {
    @include xmat-transition(transform .4s $easing, color .4s $easing, width .4s $easing, opacity .2s $easing);
  }
  &[floatLabel="never"] {
    .xmat-time-empty span.xmat-time-colon {
      opacity: 0;
      cursor: default;
    }
  }
  &.mat-form-field-hide-placeholder {
    &[floatLabel="auto"],
    &:not([floatLabel]) {
      xmat-time {
        &:not(.floating):not(.empty-placeholder) {
          + span.mat-form-field-label-wrapper {
            label {
              opacity: 0;
            }
          }
        }
        &.empty-placeholder:not(.floating) {
          span.xmat-time-colon {
            opacity: 0;
          }
        }
      }
    }
  }
}

div.xmat-time-wrap {
  div {
    display: flex;
  }

  input {
    border: none;
    background: none;
    padding: 0;
    outline: none;
    font: inherit;
    text-align: center;
  }

  &.xmat-time-invalid {
    span.xmat-time-colon,
    span.xmat-time-required {
      color: $error-color;
    }
    //Firefox fix opacity
    ::placeholder {
      opacity: 1;
    }
    //Microsoft Edge
    ::-ms-input-placeholder {
      color: $error-color
    }
    // Microsoft IE 10-11
    :-ms-input-placeholder {
      color: $error-color
    }
    //Chrome, Firefox, Opera, Safari 10.1+
    ::placeholder {
      color: $error-color
    }
  }

}