
$bg: #30688b;
$bgop: #46b7fe55;
$fg: lighten($bg, 20%);
$borderWidth: 1px;


.radio-group {
  border: solid $borderWidth transparent;
  border-image: var(--gradient-bg) 1;
  display: inline-block;

  overflow: hidden;

  input[type='radio'] {
    position: absolute;
    visibility: hidden;
    display: none;
  }
  
  label {
    color: lighten($bg, 40%);
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    padding: 5px 12px;
    // width: 30px;
    // writing-mode: vertical-rl;
    background-color: rgba(26, 34, 41, 0.4);
    text-align: end;
    &:hover {
      background: var(--gradient-bg-opacity);
      background-size: 300% 300%;
      animation: gradientAnimation 2s ease infinite alternate;
    }
  }
  
  input[type='radio']:checked + label {
    color: lighten($bg, 60%);
    background: var(--gradient-bg-opacity);
    background-size: 300% 300%;
    animation: gradientAnimation 2s ease infinite alternate;
  }
  
  label + input[type='radio'] + label {
    border-top: solid $borderWidth $fg;
    border-image: var(--gradient-bg) 1;
    // margin-bottom: px;
  }
}