:host(us-radio-button) {
  .radio-button-wrapper {
    align-items: flex-start;
    justify-content: center;
    display: flex;

    &.radio-button-vertical {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: var(--space-inline-s);
    }

    &.radio-button-horizontal {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: var(--space-outer-s);
    }

    .radio-button {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: auto;

      input {
        box-sizing: border-box;
        width: var(--radiobutton-base-width);
        height: var(--radiobutton-base-height);
        border: var(--radiobutton-border-width) solid var(--radiobutton-border-color);
        border-radius: calc(var(--radiobutton-base-width) * 6.5);
        background-color: var(--color-neutral-0);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        appearance: none;
        cursor: pointer;

        &:hover {
          background-color: var(--radiobutton-hover-bg-color);
        }

        &:checked {
          background-color: var(--radiobutton-dot-color);
          box-shadow: inset 0px 0px 0px calc(var(--radiobutton-base-width) * 0.2) var(--color-neutral-0);
        }

        &:checked:hover {
          border-color: var(--radiobutton-border-color);
          background-color: var(--radiobutton-dot-color);
          box-shadow: inset 0px 0px 0px calc(var(--radiobutton-base-width) * 0.2) var(--radiobutton-hover-bg-color);
        }

        &:checked:disabled {
          background-color: var(--radiobutton-disabled-dot-bg-color);
          box-shadow: inset 0px 0px 0px calc(var(--radiobutton-base-width) * 0.2) var(--radiobutton-disabled-bg-color);
          border-color: var(--radiobutton-disabled-border-color);
          cursor: default;
        }

        &:disabled {
          background-color: var(--radiobutton-disabled-bg-color);
          box-shadow: none;
          border-color: var(--radiobutton-disabled-border-color);
          cursor: default;
        }
      }

      label {
        cursor: pointer;
        font: var(--text-p-m-light);
        color: var(--color-neutral-1000);
        margin-left: var(--space-inline-l);
      }

      .info {
        margin-left: var(--space-inner-m);
      }

      input[disabled] + label {
        cursor: default;
      }
    }
  }
}