@use '../../base/variable';
@use '../../base/token';
@use '../../sprite';
@use '../../abstract';

.cds-inquiry-bar {
  // @include abstract.debug();
  display: grid;
  gap: 24px;
  border-block-end: 1px solid var(--gray-100);

  &__counts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    order: 2;
    padding-block: 20px;
    padding-inline: variable.$gap-sm;
    color: var(--gray-400);
  }

  &__count {
    margin-inline: 2px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    color: var(--gray-500);
  }

  &__search {
    padding-inline: variable.$gap-sm;
  }

  [type='search']::-webkit-search-cancel-button {
    @include abstract.bg2x-sprite();
    @include abstract.sprite2x(sprite.$ico-search-clear);
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  @include abstract.media-bp-up('md') {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__counts {
      order: initial;
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      border-block-width: 0;
    }

    &__link {
      @include abstract.relative;

      padding-inline-start: 16px;
      margin-inline-start: 16px;

      &::before {
        @include abstract.absolute($top: 50%, $left: 0);
        content: '';
        transform: translateY(-50%);
        width: 1px;
        height: 12px;
        background-color: var(--gray-200);
      }
    }
  }
}