@import './../../functions', './../../mixins', './../../variables';

$field: (
  'padding-vertical': 8,
  'padding-horizontal': 16,
  'font-size': 16,
  'line-height': 24,
  'border': 1,
  'border-radius': 8,
);
$autoresize: (
  'height': 42,
);
$character-limit: (
  'max-width': 65,
  'padding-horizontal': 16,
  'padding-bottom': 28,
);

@mixin field-styling {
  @include transition(padding-bottom, 0.5s);

  background: get-map($theme, 'form_input_bg');
  color: get-map($theme, 'form_input');
  border: px-to-rem(get-map($field, 'border')) solid get-map($theme, 'form_input_border');
  border-radius: px-to-rem(get-map($field, 'border-radius'));
  box-sizing: border-box;
  outline: none;

  &:focus,
  &:focus-visible {
    box-shadow: $outline get-map($theme, 'form_input_focus_box-shadow');
  }

  &.error {
    border-color: get-map($theme, 'form_input_error_border');
  }
}

@layer base {
  ::placeholder {
    color: get-map($theme, 'form_input_placeholder');
    opacity: 1;
  }

  input,
  .input,
  textarea {
    @include field-styling;

    width: 100%;
    padding: px-to-rem(get-map($field, 'padding-vertical'))
      px-to-rem(get-map($field, 'padding-horizontal'));
    font-size: px-to-rem(get-map($field, 'font-size'));
    color: get-map($theme, 'form_input');
    line-height: px-to-rem(get-map($field, 'line-height'));

    &.autoresize {
      @include transition(height, 0.5s);

      min-height: px-to-rem(get-map($autoresize, 'height'));
      overflow: hidden;

      &:empty,
      &.single-line {
        // This is to override the inline styles for the height
        height: px-to-rem(get-map($autoresize, 'height')) !important;
      }

      &[data-character-limit] {
        &:focus,
        &:focus-within {
          padding-right: px-to-rem(
            get-map($character-limit, 'max-width') +
              get-map($character-limit, 'padding-horizontal')
          );
        }
      }
    }

    &:not(.autoresize)[data-character-limit] {
      &:focus,
      &:focus-within {
        padding-bottom: px-to-rem(get-map($character-limit, 'padding-bottom'));
      }
    }

    // Remove default styling, for consistency
    &[type='search'] {
      &::-ms-clear {
        width: 0;
        height: 0;
        display: none;
      }

      &::-ms-reveal {
        width: 0;
        height: 0;
        display: none;
      }

      &::-webkit-search-decoration,
      &::-webkit-search-cancel-button,
      &::-webkit-search-results-button,
      &::-webkit-search-results-decoration {
        display: none;
      }
    }
  }

  textarea {
    resize: none;
  }
}
