@use "../../style/variables" as *;

.#{$prefix}-input {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  color: var(--ty-input-color, var(--ty-color-text));
  height: var(--ty-input-height-current, var(--ty-input-height-md, var(--ty-height-md)));
  padding-inline: var(--ty-input-padding-inline-current, var(--ty-input-padding-inline-md, #{$input-md-padding}));
  gap: var(--ty-input-affix-gap, var(--ty-spacing-3));
  border: 1px solid var(--ty-input-border);
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  background-color: var(--ty-input-bg, var(--ty-color-bg-container));
  box-shadow: var(--ty-input-shadow, none);
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;

  &:hover {
    border-color: var(--ty-input-border-hover, var(--ty-color-primary));
  }

  &:focus-within {
    border-color: var(--ty-input-border-focus, var(--ty-color-primary));
    box-shadow: var(--ty-input-shadow-focus, var(--ty-shadow-focus));
  }

  &__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: var(--ty-input-font-size-current, var(--ty-input-font-size-md, var(--ty-font-size-base)));
    line-height: var(--ty-input-line-height, var(--ty-line-height-base));

    &::placeholder {
      color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
    }
  }

  &__prefix,
  &__suffix {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: inherit;
  }

  &__clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ty-input-clear-color, var(--ty-color-text-quaternary));
    width: var(--ty-input-clear-size-current, var(--ty-input-clear-size, 1em));
    height: var(--ty-input-clear-size-current, var(--ty-input-clear-size, 1em));
    cursor: pointer;
    flex-shrink: 0;
  }

  &_sm {
    --ty-input-height-current: var(--ty-input-height-sm, var(--ty-height-sm));
    --ty-input-font-size-current: var(--ty-input-font-size-sm, var(--ty-font-size-sm));
    --ty-input-padding-inline-current: var(--ty-input-padding-inline-sm, #{$input-sm-padding});
    --ty-input-clear-size-current: var(--ty-input-clear-size-sm, var(--ty-input-clear-size, 14px));
  }

  &_md {
    --ty-input-height-current: var(--ty-input-height-md, var(--ty-height-md));
    --ty-input-font-size-current: var(--ty-input-font-size-md, var(--ty-font-size-base));
    --ty-input-padding-inline-current: var(--ty-input-padding-inline-md, #{$input-md-padding});
    --ty-input-clear-size-current: var(--ty-input-clear-size-md, var(--ty-input-clear-size, 16px));
  }

  &_lg {
    --ty-input-height-current: var(--ty-input-height-lg, var(--ty-height-lg));
    --ty-input-font-size-current: var(--ty-input-font-size-lg, var(--ty-font-size-lg));
    --ty-input-padding-inline-current: var(--ty-input-padding-inline-lg, #{$input-lg-padding});
    --ty-input-clear-size-current: var(--ty-input-clear-size-lg, var(--ty-input-clear-size, 18px));
  }

  &_disabled {
    cursor: not-allowed;
    background-color: var(--ty-input-bg-disabled, var(--ty-color-bg-disabled));
    color: var(--ty-input-text-disabled, var(--ty-color-text-quaternary));

    &:hover {
      border-color: var(--ty-input-border);
    }

    &:focus-within {
      box-shadow: none;
    }

    .#{$prefix}-input__input {
      cursor: not-allowed;
    }

    .#{$prefix}-input__clear-btn {
      cursor: not-allowed;
    }
  }
}

.#{$prefix}-input-group {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  position: relative;
  align-items: stretch;

  & > .#{$prefix}-input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & > * {
    position: relative;
    min-width: 0;
    flex-shrink: 0;

    &:not(:first-child) {
      margin-left: calc(-1 * var(--ty-control-group-border-width, 1px));
    }

    &:hover {
      z-index: var(--ty-control-group-focus-z-index, 1);
    }
  }

  & > .#{$prefix}-input,
  & > .#{$prefix}-input-number {
    flex: 1;
  }

  &_sm {
    height: var(--ty-input-height-sm, var(--ty-height-sm));
  }

  &_md {
    height: var(--ty-input-height-md, var(--ty-height-md));
  }

  &_lg {
    height: var(--ty-input-height-lg, var(--ty-height-lg));
  }

  .#{$prefix}-input {
    z-index: 1;
    flex: 1;

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:first-child, :last-child) {
      border-radius: 0;
    }
  }

  & > .#{$prefix}-btn,
  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-btn,
  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-select,
  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-input,
  & > .#{$prefix}-input-group-addon.#{$prefix}-input-group-addon_control > .#{$prefix}-input-number {
    height: 100%;
  }

  & > :not(:first-child) {
    .#{$prefix}-btn,
    .#{$prefix}-input,
    .#{$prefix}-input-number__input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  & > :not(:last-child) {
    .#{$prefix}-btn,
    .#{$prefix}-input,
    .#{$prefix}-input-number__input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  & > :first-child {
    .#{$prefix}-btn,
    .#{$prefix}-input,
    .#{$prefix}-input-number__input {
      border-top-left-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
      border-bottom-left-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
    }
  }

  & > :last-child {
    .#{$prefix}-btn,
    .#{$prefix}-input,
    .#{$prefix}-input-number__input {
      border-top-right-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
      border-bottom-right-radius: var(--ty-control-group-radius, var(--ty-control-radius, var(--ty-border-radius)));
    }
  }
}

.#{$prefix}-input-group-addon {
  background-color: var(--ty-input-addon-bg, var(--ty-color-fill));
  border: 1px solid var(--ty-input-border);
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  color: var(--ty-input-color, var(--ty-color-text));
  padding: var(--ty-input-addon-padding, var(--ty-spacing-3));

  &_sm {
    font-size: var(--ty-input-font-size-sm, var(--ty-font-size-sm));
  }

  &_md {
    font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
  }

  &_lg {
    font-size: var(--ty-input-font-size-lg, var(--ty-font-size-lg));
  }

  &:first-child {
    border-right: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  &:last-child {
    border-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  &:not(:first-child, :last-child) {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: var(--ty-input-addon-padding, var(--ty-spacing-3));
  }

  &_no-border {
    border: none;
    padding: 0;
  }

  &_control {
    padding: 0;
    background-color: transparent;

    & > .#{$prefix}-btn,
    & > .#{$prefix}-select,
    & > .#{$prefix}-input,
    & > .#{$prefix}-input-number {
      height: 100%;
      border-radius: 0;
    }
  }
}