.pill {

  display: flex;

  li {
    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;
  }

  a,
  &-selected-item {
    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;
  }

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

    .pill-label {
      text-decoration: underline;
    }

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

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

    &:active,
    &:focus {
      z-index: 10;
    }
  }

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

    &:focus {
      z-index: 1000;
      outline: 3px solid $yellow;
    }

  }

  &-centered-item {
    text-align: center;
  }

}

.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,
    &:focus,
    &:link:focus {
      color: $light-blue-25;
    }

  }

}