.wc-block-components-form .wc-shiptastic-components-combobox,
.wc-shiptastic-components-combobox {
  .wc-block-components-combobox-control {
    @include reset-typography();
    @include reset-box();

    // Fixes width in the editor.
    .components-flex {
      width: 100%;
    }

    .components-base-control__field {
      @include reset-box();
      position: relative;
    }
    .components-combobox-control__suggestions-container {
      @include reset-typography();
      @include reset-box();
      position: relative;
    }
    input.components-combobox-control__input {
      @include reset-typography();
      @include font-size(regular);
      padding: em($gap + $gap-smaller) em($gap-smaller) em($gap-smaller);
      line-height: em($gap);
      box-sizing: border-box;
      outline: inherit;
      border: 1px solid $input-border-gray;
      background: #fff;
      box-shadow: none;
      color: $input-text-active;
      font-family: inherit;
      font-weight: normal;
      letter-spacing: inherit;
      text-align: left;
      text-overflow: ellipsis;
      text-transform: none;
      white-space: nowrap;
      width: 100%;
      opacity: initial;
      border-radius: $universal-border-radius;
      height: 50px;

      &[aria-expanded="true"],
      &:focus {
        background-color: #fff;
        color: $input-text-active;
        outline: 0;
        box-shadow: 0 0 0 1px $input-border-gray;
      }

      &[aria-expanded="true"] {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }

      .has-dark-controls & {
        background-color: $input-background-dark;
        border-color: $input-border-dark;
        color: $input-text-dark;

        &:focus {
          background-color: $input-background-dark;
          color: $input-text-dark;
          box-shadow: 0 0 0 1px $input-border-dark;
        }
      }
    }
    .components-form-token-field__suggestions-list {
      position: absolute;
      z-index: 10;
      background-color: $select-dropdown-light;
      border: 1px solid $input-border-gray;
      border-top: 0;
      border-bottom: 0;
      margin: 0 !important;
      padding: 0;
      max-height: 300px;
      min-width: 100%;
      overflow: auto;
      color: currentColor;
      border-bottom-left-radius: $universal-border-radius;
      border-bottom-right-radius: $universal-border-radius;
      box-shadow: 0 1px 0 1px $input-border-gray;
      box-sizing: border-box;

      .has-dark-controls & {
        background-color: $select-dropdown-dark;
        color: $input-text-dark;
      }

      .components-form-token-field__suggestion {
        @include font-size(regular);
        color: $gray-700;
        cursor: default;
        list-style: none;
        margin: 0;
        padding: em($gap-smallest) $gap;

        &.is-selected {
          background-color: $gray-300;
          .has-dark-controls & {
            background-color: $select-item-dark;
          }
        }

        // Force empty rows to have a height.
        &::after {
          content: " ";
          display: inline-block;
        }

        &:hover,
        &:focus,
        &.is-highlighted,
        &:active {
          background-color: #00669e;
          color: #fff;
        }
      }
    }

    label.components-base-control__label {
      @include reset-typography();
      @include font-size(regular);
      position: absolute;
      transform: translateY(em($gap));
      line-height: 1.25; // =20px when font-size is 16px.
      left: em($gap-smaller);
      top: -2px;
      transform-origin: top left;
      transition: all 200ms ease;
      color: $universal-body-low-emphasis;
      z-index: 1;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100% - #{2 * $gap});
      white-space: nowrap;

      .has-dark-controls & {
        color: $input-placeholder-dark;
      }
      @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }
  }

  .wc-block-components-combobox-control:has(input:-webkit-autofill) {
    label {
      transform: translateY(#{$gap-smallest}) scale(0.75);
    }
  }

  &.is-active,
  &:focus-within {
    .wc-block-components-combobox-control
    label.components-base-control__label {
      transform: translateY(#{$gap-smallest}) scale(0.75);
    }
  }

  &.has-error {
    .wc-block-components-combobox-control {
      label.components-base-control__label {
        color: $alert-red;
      }
      input.components-combobox-control__input {
        &,
        &:hover,
        &:focus,
        &:active {
          border-color: $alert-red;
        }
        &:focus {
          box-shadow: 0 0 0 1px $alert-red;
        }
      }
    }
  }
}

.wc-shiptastic-components-combobox.has-reset {
  .components-combobox-control__suggestions-container {
    > .components-flex {
      .components-combobox-control__input {
        padding-right: 50px;
      }

      .components-flex-item:not(.components-flex-block) {
        position: absolute;
        right: 10px;

        button {
          background: transparent;
          border: none;
          cursor: pointer;

          > span {
            display: none !important;
          }
        }
      }
    }
  }
}