@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.radio-button {
  display: inline-block;
  margin-right: $baseUnit * 3;

  .radio-button-inner {
    display: flex;
    align-items: center;
  }

  .radio-wrapper {
    position: relative;

    .radio {
      width: 26px;
      height: 26px;
      margin: 0 $baseUnit 0 0;

      &:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 0px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #A3A3A3;
        z-index: 1;
      }
    }

    input[type="radio"] {
      position: absolute;
      top: 0;
      left: 0;
      width: 24px;
      height: 24px;
      display: block;
      margin: 0;
      opacity: 0;
      z-index: 3;

      &:checked + .radio {
        position: relative;
        z-index: 2;

        &:before {
          border-color: $deepSeaGreen;
        }

        &:after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: $deepSeaGreen;
          z-index: 3;
        }
      }

      &:focus + .radio {
        &:before {
          border-color: $deepSeaGreen;
        }
      }

      &:focus-visible + .radio {
        &:before {
          box-shadow: 0 0 0 4px $lightBlue;
        }
      }
    }
  }

  label {
    display: block;
    line-height: 1em;
    margin: 0;
    padding: 0;

    &.disabled {
      @include disabled();
    }
  }
}