@import 'pack/seed-family/_index';
@import '../configs/constants';

@mixin input-styles($padding: 8px) {
  align-items: center;
  background-color: transparent;
  border: none;
  display: flex;
  padding-bottom: 1px;
  padding-top: 1px;
  padding-left: $padding;
  padding-right: $padding;
  position: relative;

  // Elements
  &__item {
    position: relative;
    z-index: 1;
  }

  &__inlinePrefix,
  &__inlineSuffix {
    opacity: 0.3;
    padding-left: 4px;
    padding-right: 4px;
    position: relative;
    top: 0;
    white-space: nowrap;

    &.is-icon {
      opacity: 1;

      @include parent('.is-multiline >') {
        align-self: flex-start;
        padding-top: 9px;
      }
    }

    // States
    @each $state in $STATES {
      @include parent('.is-#{$state} > ') {
        color: _color(state, $state, color);
      }
    }
  }

  &__inlinePrefix.is-icon {
    margin-left: -8px;

    @include parent('.is-error.is-seamless > ') {
      margin-left: 0;
    }
  }

  &__inlineSuffix.is-icon {
    margin-right: -8px;

    @include parent('.is-error.is-seamless > ') {
      margin-right: 0;
    }
  }
}

@mixin input-normalize-autofill-styles($background: white) {
  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px $background inset;
    background-clip: content-box;
    transition: background-color 5000s ease-in-out 0s;
  }
}