@use 'sass:map';
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/transition' as transition;
@use '../text-field';
@use './input' as *;

.#{$prefix}-container {
  width: 100%;
}

.#{$prefix} {
  width: 100%;
  display: flex;
  min-width: spacing.semantic-variable(size, container, concentrate-fixed);
  
  &:has(.#{text-field.$prefix}__prefix),
  &:has(.#{text-field.$prefix}__suffix) {
    min-width: spacing.semantic-variable(size, container, snug);
  }

  &--with-prefix-external-action,
  &--with-suffix-external-action {
    min-width: spacing.semantic-variable(size, container, snug);
  }

  &--search:has(.#{text-field.$prefix}__prefix) {
    min-width: spacing.semantic-variable(size, container, small);
  }

  &--with-prefix-external-action {
    .#{text-field.$prefix} {
      width: auto;
      flex: 1;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    > .#{$prefix}__select-button:first-child,
    > .#{$prefix}__action-button:first-child,
    > .mzn-dropdown:first-child > .#{$prefix}__select-button {
      border-right: none;
      border-top-left-radius: radius.variable(base);
      border-bottom-left-radius: radius.variable(base);
    }
  }

  &--with-suffix-external-action {
    .#{text-field.$prefix} {
      width: auto;
      flex: 1;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    > .#{$prefix}__select-button:last-child,
    > .#{$prefix}__action-button:last-child,
    > .mzn-dropdown:last-child > .#{$prefix}__select-button {
      border-left: none;
      border-top-right-radius: radius.variable(base);
      border-bottom-right-radius: radius.variable(base);
    }
  }

  &--measure-with-spinner {
    min-width: spacing.semantic-variable(size, container, concentrate-fixed);

    &:has(.#{text-field.$prefix}__prefix),
    &:has(.#{text-field.$prefix}__suffix),
    &.#{$prefix}--with-prefix-external-action,
    &.#{$prefix}--with-suffix-external-action {
      min-width: spacing.semantic-variable(size, container, concentrate-fixed);
    }
  }

  &--measure-without-spinner {
    min-width: spacing.semantic-variable(size, container, concentrate-fixed);

    &:has(.#{text-field.$prefix}__prefix),
    &:has(.#{text-field.$prefix}__suffix),
    &.#{$prefix}--with-prefix-external-action,
    &.#{$prefix}--with-suffix-external-action {
      min-width: spacing.semantic-variable(size, container, concentrate-fixed);
    }
  }

  &--number {
    min-width: spacing.semantic-variable(size, element, loose);

    input {
      width: 100%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &--main {
    .#{$prefix}--number {
      padding: spacing.semantic-variable(padding, vertical, calm) spacing.semantic-variable(padding, horizontal, tiny);
    }

    .#{$prefix}__spinners {
      margin: calc(spacing.semantic-variable(padding, vertical, calm) * -1) 0;
    }
  }

  &--sub {
    .#{$prefix}--number {
      padding: spacing.semantic-variable(padding, vertical, tight) spacing.semantic-variable(padding, horizontal, tiny);
    }

    .#{$prefix}__spinners {
      margin: calc(spacing.semantic-variable(padding, vertical, tight) * -1) 0;
    }
  }

  &--password {
    &:has(.#{text-field.$prefix}__suffix) {
      min-width: unset;
    }
  }

  &__spinners {
    display: flex;
    flex-flow: column;
    gap: 0;
    padding-left: spacing.semantic-variable(padding, horizontal, micro);
  }

  input {
    width: 100%;
    padding: 0;

    /* clears the 'X' from Chrome */
    &[type='search']::-webkit-search-decoration,
    &[type='search']::-webkit-search-cancel-button,
    &[type='search']::-webkit-search-results-button,
    &[type='search']::-webkit-search-results-decoration {
      display: none;
    }

    &[type='number']::-webkit-outer-spin-button,
    &[type='number']::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }

    &[type='number'] {
      appearance: textfield;
    }
  }
}

.#{$prefix}__field {
  width: 100%;
  display: flex;
}

.#{$prefix}__indicator-container {
  padding-top: spacing.semantic-variable(gap, calm);
}