@checkbox-size: 40px;

.music-service-selection {
  button.music-service-option {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
  }
  .music-service-option {
    input[type="radio"] {
      display: none;
      &:not(:disabled) ~ label {
        cursor: pointer;
      }
      &:disabled ~ label {
        color: hsla(150, 5%, 75%, 1);
        border-color: hsla(150, 5%, 75%, 1);
        cursor: not-allowed;
      }
    }
    label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      height: 100%;
      background: white;
      border: 2px solid @green;
      border-radius: 5px;
      padding: 1rem;

      text-align: center;
      font-weight: normal;
      position: relative;

      > .title {
        flex: 1;
        flex-basis: 120px;
        padding: 0 0.4em;

        font-size: 1.35em;
        font-family: @headings-font-family;
        font-weight: @headings-font-weight;
        line-height: @headings-line-height;
      }
      > .details {
        flex: 2;
        text-align: justify;
        flex-basis: 200px;
      }
    }

    input[type="radio"]:checked + label {
      background: @green;
      color: @white;

      > .details {
        font-weight: bold;
      }
      &::after {
        position: absolute;
        left: 0;
        top: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        height: @checkbox-size;
        width: @checkbox-size;
        line-height: @checkbox-size;

        content: "✔";
        color: @green;
        font-size: 24px;
        text-align: center;

        border: 2px solid @green;
        background: @white;
        box-shadow: 3px 1px 5px -2px @dark;
      }
    }

    // Special style for the "off" button when no other option is selected
    &.disable {
      label {
        border-color: #a0a0a0;
      }
      input[type="radio"]:checked + label {
        background: #a0a0a0;
      }
    }
  }
}
