@import '../../scss/styles.scss';

@layer payload-default {
  .pill-selector {
    display: flex;
    flex-wrap: wrap;
    background: var(--theme-elevation-50);
    padding: var(--base);
    gap: calc(var(--base) / 2);

    &__pill {
      background-color: transparent;
      box-shadow: 0 0 0 1px var(--theme-elevation-150);

      &.pill-selector__pill {
        cursor: pointer;

        &:hover {
          background-color: var(--theme-elevation-100);
        }
      }

      &.pill-selector__pill--selected {
        background-color: var(--theme-elevation-0);
        box-shadow:
          0 0px 1px 1px var(--theme-elevation-150),
          0 2px 4px -2px rgba(0, 0, 0, 0.1);

        &:hover {
          background-color: var(--theme-elevation-0);
          box-shadow:
            0 0px 1px 1px var(--theme-elevation-250),
            0 3px 4px -1px rgba(0, 0, 0, 0.1);
        }
      }
    }

    // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
    .pill__icon {
      padding: 0;
    }

    @include small-break {
      padding: calc(var(--base) / 2);
    }
  }
}