@import "../styles/imgVar.less";
@import './config.less';
.radio-button-config(@color: #fdd535);

.radio-button {
  &__inset {
    display: none;
  }

  &__color {
    &.disabled {
      opacity: 0.5;
      background: transparent;
    }
  }

  &__inset+&__color {
    display: block;
    width: 94px;
    height: 52px;
    position: relative;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    box-sizing: border-box;
  }

  &__inset+&__color &__after {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
    background: rgba(255, 255, 255, 1);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
  }

  // &__inset:checked + &__color {
  //   background: #fdd535;
  // }
  &__inset:checked+&__color &__after {
    left: calc(100% - 48px);
  }

  // &__inset:checked + &__color {
  //   border: 2px solid #fdd535;
  // }
  &__inset+&__color {
    background: #f6f6f6;
    border-radius: 30px;
    border: 2px solid rgba(226, 226, 226, 1);
  }

  &__inset+&__color &__after {
    background: #fff;
    border-radius: 50%;
    width: 48px !important;
    height: 48px !important;
    top: 0px;
    left: 1px;
  }
}