// Large hit area
// Radio buttons & checkboxes

// By default, block labels stack vertically
.block-label {

  display: block;
  float: none;
  clear: left;
  position: relative;

  background: $panel-colour;
  border: 1px solid $panel-colour;
  padding: (18px $gutter $gutter-half $gutter*1.5);
  margin-top: 10px;
  margin-bottom: 10px;

  cursor: pointer; // Encourage clicking on block labels

  @include media(tablet) {
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    // width: 25%; - Test : check that text within labels will wrap
  }
}

.block-label:hover {
  border-color: $black;
}

// Position checkbox within label, to allow text to wrap
.block-label input {
  position: absolute;
  top: 18px;
  left: $gutter-half;
  cursor: pointer;
}

// Use inline, to sit block labels next to each other
.inline .block-label {
  clear: none;
  margin-right: $gutter-half;
}

// Only if JavaScript is enabled

// Add focus styles to block labels
.js-enabled .add-focus {
  outline: 3px solid $yellow;
}

// Remove focus styles from radio and checkbox inputs
.js-enabled .block-label input:focus {
  outline: none;
}

// Add selected state to block labels
.js-enabled .selected {
  background: $white;
  border-color: $black;
}