@use "design";
@use "m";

.pillBox {
  display: flex;
  flex-direction: column;

  @include m.desktop {
    flex-wrap: wrap;
    flex-direction: row;

    & > * {
      // I know, I know. this is less than ideal.  This lets us overwrite
      // dynamic inline element styles that we get from the index of a pill.
      // We could always generate a list of
      // .order-${n} classes using an SCSS for-loop, but this seems a bit more
      // intuitive, even if it is bad practice.
      order: initial !important;
    }

    // We don't have a container to put padding on, so do it on the individual pills:

    .pill {
      margin-top: design.$card-h-padding;
    }

    .pill:first-of-type {
      margin-left: design.$card-h-padding;
    }

    .pill:last-of-type {
      margin-right: design.$card-h-padding;
    }

    &.alignLastRight {
      > .pill:last-of-type {
        margin-left: auto;
      }
    }
  }

  @include m.handheld {
    padding-top: 12px;
    padding-bottom: 12px;

    .pill {
      margin-left: design.$card-h-padding;
      margin-right: design.$card-h-padding;
    }
  }
}

.pill {
  cursor: pointer;
  user-select: none;

  border-radius: 100px;

  display: flex;
  align-items: center;
  padding: 18px 20px;

  white-space: nowrap;

  border-width: 1px;
  border-style: solid;
  border-color: transparent;

  &.isActive {
    background: design.$neutral-95;
  }
}

.pillCount {
  margin-left: auto;

  @include m.desktop {
    margin-left: 8px;
  }
}

.pillBody {
  flex-grow: 1;
  flex-basis: 100%;

  @include m.desktop {
    border-top: 1px solid design.$card-border-color;
    margin-top: design.$card-h-padding;
  }

  @include m.handheld {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}