label.box-label {
  cursor: pointer;
}
.box-label {
  @extend .box;
  @extend .is-centered;
  @extend .is-gapless;
  border-radius: 3px;
  text-decoration: none;
  width: 100%;

  > div:first-child {
    flex-grow: 1;
  }

  &.is-column {
    @extend .is-flex-column;
  }
  &.is-selected {
    box-shadow: 0 0 0 1px $blue;
  }

  input[type=radio] {
    display: none;
  }

  input[type=radio] + label {
    border: 1px solid $grey;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    margin: 1rem auto 0;
    height: 1rem;
    width: 1rem;
  }

  input[type=radio]:checked + label {
    background: $blue;
    border: 1px solid $blue;
    box-shadow: inset 0 0 0 0.15rem $white;
  }
}