@import '~scss/variables';

.accessModeWrapper {
  :global {
    .radio-wrapper {
      width: 240px;
      margin-top: 4px;
      margin-right: 20px !important;
      padding: 12px 20px;
      border: 1px solid $border-color;
      border-radius: 4px;
      transition: all $trans-speed ease-in-out;

      &:last-of-type {
        margin-right: 0 !important;
      }

      &::before {
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
      }

      &.checked, &:hover {
        &::after {
          left: 24px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    label.radio span.label-value {
      padding-left: 20px;
    }
  }
}

.accessMode {
  display: inline-block;
  
  :global {
    .name {
      font-size: $size-normal;
      font-weight: $font-bold;
      font-family: $font-family-id;
      line-height: 20px;
      color: #232d41;
      transition: all $trans-speed ease-in-out;
    }

    .desc {
      font-weight: $font-thin;
      line-height: 20px;
      color: #79879c;
    }
  }
}
