@import '../_variables.scss';
@import '../_mixins.scss';

@include exports('forms.inputs') {
  .fui-form-control {
    .fui-control-container {
      .fui-input-wrapper {
        input:not([type='checkbox']):not([type='radio']):not(.fui-layout-small) {
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 100%;
          border: 1px solid $gray-300;
          font-family: inherit;
          padding: $controls-padding 3rem $controls-padding $controls-padding;
          height: $default-control-height;
          font-size: $font-size-base;
          font-weight: $font-weight-bold;
          background: $white;
          color: $gray-900;
          @include controls-transitions();
          @include border-radius(3px);
          @include no-placeholder();

          &:focus {
            border-color: $gray-500;
          }

          &[disabled] {
            background-color: $gray-200;
            color: $gray-500;
          }
        }

        input[type='password']:not(.fui-layout-small) {
          font-size: $font-size-lg !important;
          font-weight: $font-weight-bolder !important;
        }

        .fui-layout-small {
          -webkit-appearance: none;
          -moz-appearance: none;
          width: 100%;
          border: 1px solid $gray-300;
          font-family: inherit;
          padding: $controls-small-padding 2rem $controls-small-padding $controls-small-padding;
          height: $default-control-small-height;
          font-size: $font-size-sm;
          font-weight: $font-weight-normal;
          background: $white;
          color: $gray-900;
          @include border-radius(3px);
          @include no-placeholder();

          &:focus {
            border-color: $gray-500;
          }

          &[disabled] {
            background-color: $gray-200;
            color: $gray-500;
          }

          &[type='password'] {
            font-size: $font-size-base !important;
            font-weight: $font-weight-bold !important;
          }
        }
      }

      &:not(.fui-empty):not(.fui-no-label) {
        .fui-input-wrapper {
          input:not([type='checkbox']):not([type='radio']):not(.fui-layout-small) {
            padding: $controls-padding 3rem 0 $controls-padding !important;
          }
        }
      }
    }
  }
}