label.box-label {
  cursor: pointer;
}

.box-label {
  @extend .box;
  @extend .is-centered;
  @extend .is-gapless;
  border-color: $grey-light;
  border-radius: 3px;
  box-shadow: $box-link-shadow, $box-shadow-middle;
  text-decoration: none;
  transition: box-shadow $speed;
  width: 100%;

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

  &.is-column {
    @extend .is-flex-column;
  }

  &.is-selected {
    box-shadow: $box-link-hover-shadow, $box-shadow-middle;

    .icon {
      color: $grey;
    }
  }

  .icon {
    color: $grey-light;
  }

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

  input[type=radio] + label {
    border: 1px solid $grey-light;
    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;
  }
}

.box-label-header {
  color: $grey;

  .is-selected & {
    color: $text;
  }
}