@import '../../styles/vendor/bootstrap_foundation-sites';

@mixin o-form-element {
  display: inline-block;
  border: 0;
  background-color: transparent;

  @if has-value($co-animation__box-transition) {
    transition: $co-animation__box-transition;
  }
}

@mixin o-form-element-select-wrapper {
  display: inline-block;
  position: relative;
  padding-right: 12px;

  &,
  > * {
    cursor: pointer;
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    margin-top: -3px;
    border-width: 6px 4px;
    border-style: solid;
    border-color: $co-color__fg__text--higher transparent transparent;
    pointer-events: none;
  }
}

@mixin o-form-element-select {
  margin-right: 10px;
  user-select: none;
  appearance: none;
}

@mixin o-form-element-placeholder($color) {
  // ::placeholder
  &::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba($color, 0.8);
  }

  &::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba($color, 0.8);
  }

  &:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba($color, 0.8);
  }

  &:-moz-placeholder {
    /* Firefox 18- */
    color: rgba($color, 0.8);
  }
}

@mixin o-form-element--decorated {
  min-height: $co-component__height;
  padding: $co-component__spacing;
}

@mixin o-form-element--dark {
  @include o-form-element-placeholder($co-color__contrast__text);

  @include o-form-element--decorated;

  background-color: $co-color__contrast__back--lower;
  color: $co-color__fg__text;

  &:focus {
    background-color: $co-color__contrast__back--lower;
    color: $co-color__contrast__text;
  }

  &:disabled {
    background: $co-color__contrast__back--high;
  }
}

@mixin o-form-element--light {
  @include o-form-element--decorated;

  border: 1px solid $co-color__primary;
  background-color: $co-color__fg__back;
  color: $co-color__fg__text;

  &:focus {
    border-color: $co-color__primary--higher;
  }

  &:disabled {
    background: transparent;
    color: $co-color__primary--low;
  }

  @include o-form-element-placeholder($co-color__fg__text--high);
}

@mixin o-form-element--contrasted {
  @include o-form-element--decorated;

  border-bottom: 2px solid $co-color__primary;
  background-color: $co-color__bg__back--higher;
  color: $co-color__fg__text;

  &:focus {
    border-color: $co-color__primary--higher;
  }

  &:disabled {
    background: transparent;
    color: $co-color__primary--low;
  }

  @include o-form-element-placeholder($co-color__fg__text--high);
}

@mixin o-form-element--inline {
  @include flex-grid-row($size: expand);

  &__label {
    @include flex-grid-size(shrink);

    display: block;
    padding-right: map_get($co-form__spacing, small);
  }

  &__select-wrapper {
    display: block;
    flex: 0 1 auto;
    overflow: hidden;
  }

  &__input {
    display: block;
  }

  &__errors {
    @include flex-grid-size(12);
  }
}
