@use "pix-design-tokens/breakpoints";

.pix-filter-banner {
  font-size: 0.875rem;

  &__container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-2x);
    width: 100%;
    min-height: 64px;
  }

  &__title {
    display: flex;
    align-items: center;
    margin-bottom: var(--pix-spacing-1x);
    color: var(--pix-neutral-800);
    line-height: 20px;
  }

  &__icon-title {
    width: 1rem;
    height: 1rem;
  }

  &__filter {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-4x);
  }

  &__action {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-1x);
    align-items: center;
    font-weight: var(--pix-font-medium);
  }

  &__button {
    padding: 0;
  }
}

.pix-filter-banner-button__icon {
  padding-right: var(--pix-spacing-1x);
}

@include breakpoints.device-is('tablet') {
  .pix-filter-banner {
    &__container {
      flex-direction: row;
      gap: var(--pix-spacing-6x);
      align-items: center;
    }

    &__filter {
      flex-direction: row;
      flex-grow: 2;
      flex-wrap: wrap;
      align-items: center;
    }
  }
}