notifications-admin/app/assets/stylesheets/components/pill.scss

.pill {

  display: flex;

  &-item__container {
    width: 25%;
    flex-grow: 1;
    text-align: left;

    /*
      For browsers that don’t support flexbox, use float instead.
      Float does not create floating of flex item, and do not take it
      out-of-flow. So this is ignored by browsers that support flexbox.
      See: https://www.w3.org/TR/css-flexbox-1/#flex-containers
    */
    float: left;
    /*
      Setting this as a flex container means the contents (1 item)
      will fill the vertical space due to `align-items` defaulting
      to `stretch`.
      See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#prop-align-items
    */
    display: flex;
  }

  &-item,
  &-item--selected {
    display: flex; // float causes display: block in browsers without flexbox
    flex-direction: column;
    justify-content: center;
    float: left;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0;
  }

  &-item {
    $background: $link-colour;
    background: $background;
    color: $white;
    border: 2px solid $background;
    position: relative;
    text-decoration: none;
    cursor: pointer;

    &:link,
    &:visited {
      color: $white;
    }

    &:hover {
      color: $light-blue-25;
    }

    &:active,
    &:focus {
      z-index: 10;
      color: $govuk-focus-text-colour;
      /* override default focus styles to inset bottom underline */
      box-shadow: inset 0 -4px $govuk-focus-text-colour;
      border: none;
      padding: 12px 2px; /* compensate for lack of border with padding */
    }
  }

  &-item--selected {
    background: inherit;
    border: 2px solid $black;
    outline: 1px solid rgba($white, 0.1);
    position: relative;
    z-index: 10;

    &:link,
    &:visited {
      color: $govuk-text-colour;
    }

    &:hover {
      color: govuk-tint($govuk-text-colour, 25%);
    }

    &:active,
    &:focus {
      z-index: 1000;
      color: $govuk-focus-text-colour;
      border: solid 2px $black;
      padding: 10px 0px; /* reset padding to default */
      box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
    }

  }

  &-item__label {

    text-decoration: underline;
    // reduce padding until screen is above 420px / zoomed below 300%
    padding-left: govuk-spacing(1);

    @include govuk-media-query($from: 420px) {
      padding-left: govuk-spacing(2);
    }

  }

  &-item,
  &-item--selected {
    &:focus .pill-item__label {
      text-decoration: none;
    }
  }

  &-item--centered {
    text-align: center;
    padding-left: 0;
  }

}

.pill-separate {

  &-item {

    display: block;
    text-align: left;
    padding: 10px govuk-spacing(3);
    text-align: center;

    &:link,
    &:visited {
      background: $link-colour;
      color: $white;
      text-decoration: underline;
    }

    &:hover {
      color: $light-blue-25;
    }

    &:focus,
    &:link:focus {
      color: $govuk-focus-text-colour;
      text-decoration: none;
      background: $govuk-focus-colour;
      /* override default focus style to inset bottom underline */
      box-shadow: inset 0 -4px $govuk-focus-text-colour;
    }

  }

}