@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((input))} {
  font-size: #{getValName((input, font-size))};
  input, select, textarea {
    font-size: inherit;
    color: #{getValName((input, color))};
    border-radius: #{getValName((input, border-radius))};
    outline: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    padding: .6em 1em;
    height: 2.2em;
    background-color: transparent;
    border: 1px solid;
    border-color: #{getValName((input, border-color))};
    background-color: #{getValName((input, background-color))};
    &:focus {
      border-color: #{getValName((input, focus-border-color))};
      box-shadow: #{getValName((input, focus-shadow))};
    }
    &::placeholder {
      color: #{getValName((input, placeholder-color))};
    }
    &:disabled {
      cursor: not-allowed;
      border-color: #{getValName((input, disabled-border-color))};
      background-color: #{getValName((input, disabled-background-color))};
    }
  }
  textarea {
    height: auto;
  }
}
#{getClassName((input, box))} {
  display: block;
  line-height: 1;
  outline: none;
  transition: .1s;
}

#{getClassName((input, group))} {
  display: flex;
  align-items: center;
  justify-content: center;
  #{getClassName((input, box))} {
    flex: 1;
  }
  > div:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    > input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  > div:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    > input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

#{getClassName((input))} {
  #{joinValName((shadow, base))}: 0 0px 4px color.adjust(map.get($colors, primary, base), $alpha: -0.8);
  @include set-css-val(
    input,
    (
      'font-size': (heading8),
      color: (color, neutral, 9),
      'border-radius': (border, radius, base),
      'border-color': (color, neutral, 3),
      'background-color': (color, neutral, 0),
      'focus-border-color': (color, primary),
      'focus-shadow': (shadow, base),
      'placeholder-color': (color, neutral, 3),
      'disabled-border-color': (color, neutral, 2),
      'disabled-background-color': (color, neutral, 1),
      'prevend-background-color': (color, neutral, 1),
      'append-background-color': (color, neutral, 1)
    )
  )
}

#{getClassName((input, large))} {
  @include set-css-val(
    input,
    (
      'font-size': (heading7)
    )
  );
}

#{getClassName((input, mini))} {
  @include set-css-val(
    input,
    (
      'font-size': (heading9)
    )
  );
}

#{getClassName((input, prefix))} {
  position: relative;
  input, select {
    // padding-left: #{getValName((space, l))};
    padding-left: 2em;
  }
  #{getClassName((input, prefix, icon))} {
    position: absolute;
    top: 0;bottom: 0;left: .5em; // #{getValName((space, s))};
    display: flex;align-items: center;justify-content: center;
    color: #{getValName((color, neutral, 5))};
  }
}

#{getClassName((input, suffix))} {
  position: relative;
  input, select {
    // padding-right: #{getValName((space, l))};
    padding-right: 2em;
  }
  #{getClassName((input, suffix, icon))} {
    position: absolute;
    top: 0;bottom: 0;right: .5em;// #{getValName((space, s))};
    display: flex;align-items: center;justify-content: center;
    color: #{getValName((color, neutral, 5))};
  }
  #{getClassName((input, clear))} {
    display: none;
    background-color: #{getValName((input, background-color))};
  }
}

.is-clear:hover {
  #{getClassName((input, clear))} {
    display: inline;
  }
}

#{getClassName((input, prevend))} {
  padding: .6em 1em;
  height: 2.2em;
  border: 1px solid;
  border-right-width: 0;
  border-radius: #{getValName((input, border-radius))};
  border-color: #{getValName((input, border-color))};
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #{getValName((input, prevend-background-color))};
  > [class^='os-input'], > [class^='os-select'], > [class^='os-button'] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    input, select {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:first-child {
      margin-left: calc(-1em - 1px);
    }
    &:not(:first-child) {
      margin-left: -1px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      input, select {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    &:last-child {
      margin-right: calc(-1em - 1px);
    }
  }
}
#{getClassName((input, append))} {
  padding: .6em 1em;
  height: 2.2em;
  border: 1px solid;
  border-left-width: 0;
  border-radius: #{getValName((input, border-radius))};
  border-color: #{getValName((input, border-color))};
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #{getValName((input, append-background-color))};
  > [class^='os-input'], > [class^='os-select'], > [class^='os-button'] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    input, select {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:first-child {
      margin-left: calc(-1em - 1px);
    }
    &:last-child {
      margin-right: calc(-1em - 1px);
    }
    &:not(:last-child) {
      margin-right: -1px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      input, select {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}