.list-group {
  &.list-button {
    input[type="radio"],
    input[type="checkbox"] {
      opacity: 0;
      position: fixed;
      width: 0;
      &:focus-visible + label {
        box-shadow: 0 0 0 2.5px $blue inset;
      }
      &:focus + label {
        box-shadow: 0 0 0 2.5px $blue inset;
      }
      &:checked + label {
        color: $black;
        font-weight: 500;
        background: $blue-100;
        box-shadow: 0 0 0 1px $blue;
      }
      &:checked + label p:first-child {
        font-weight: 500;
      }
    }
    label {
      color: $gray-600;
      position: relative;
      background: $white;
      transition: all 150ms linear;
      border-radius: $border-radius-lg;
      border: 1px solid $gray-500;
      width: 100%;

      &:hover {
        @include media-breakpoint-up(sm) {
          box-shadow: 0 0 0 4px $blue-100;
        }
        cursor: pointer;
      }
      + p {
        display: none;
      }
    }
  }
}