.selector__radio-group {
  border: .1rem solid;
  display: inline-block;
  cursor: pointer;

  // various styles of the radio group that can be added on
  &.rounded {
    border-radius: 1.5em;
  }
  &.tab-bottom {
    border: none;

    .option {
      border: .1rem solid;
      border-color: inherit;
      border-bottom-left-radius: .5rem;
      border-bottom-right-radius: .5rem;
      margin-top: -.1rem;
      margin-right: .5rem;
      opacity: .5;
      padding-top: .5rem;

      &.selected {
        opacity: 1;
      }

      &:last-child {
        border-right: .1rem solid;
      }
    }
  }

  // inner contents
  .option {
    display: inline-block;
    padding: .2em 0.5em 0;
    border-right: .1rem solid;
  }

  .option:last-child {
    border-right: none;
  }

  label {
    cursor: pointer;
    margin-bottom: 0;
  }

  input[type='radio'] {
    // hide radio for styling,
    // the radio set should look like a button group
    // with only one "on" at a given time
    display: none;

    &:checked {
      + label {
        > span {
          opacity: 1;
        }
      }
    }
  }
}