@use "../../../../styles/tools/generate";
@use "../../../../styles/tools/convert";
@use "./config";

@mixin base() {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;

  > * + * {
    margin-left: -2px;
  }

  > *:not([class*="mb-"]) {
    margin-bottom: 0;
  }

  > *:focus {
    z-index: 2;
  }

  > .btn {
    z-index: 1;
  }

  > .btn:not([class*="mr-"]) {
    margin-right: 0;
  }

  button,
  .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  > *:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
  }

  > *:not(:first-child):not(:last-child) .autocomplete__input {
    border-radius: 0 !important;
  }

  > *:first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  > *:first-child:not(:last-child) .autocomplete__input,
  > *:has(+ .autocomplete[style*="display: none"] + *) .autocomplete__input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  > *:last-child:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  > *:last-child:not(:first-child) .autocomplete__input,
  > *:not(:first-child):has(+ .autocomplete[style*="display: none"])
    .autocomplete__input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

@mixin item($config: config.$item) {
  @include generate.css-map($config);

  &:first-child {
    border-top-left-radius: convert.to-rem(5px);
    border-bottom-left-radius: convert.to-rem(5px);
  }
}

@mixin item-size($size, $config: config.$sizes) {
  @include generate.css-map($config, $size);
}