:host {
  display: inline-flex;
}

  :host * {
    box-sizing: border-box;
  }

.radio {
  display: inline-flex;
  line-height: var(--s-line-height-base);
  cursor: pointer;
  align-items: center;
}

.radio:focus-within .radio__box {
    box-shadow: 0 0 0 0.0625rem var(--s-background-default),
      0 0 0 0.1875rem var(--s-focus-default);
  }

.radio--variant-card {
  width: 100%;
  padding: var(--s-space-16);
  border: 0.0625rem solid var(--s-border-default);
  border-radius: var(--s-border-radius-sm);
  background-color: var(--s-surface);
}

.radio--variant-card:focus-within {
    box-shadow: 0 0 0 0.125rem var(--s-background-default),
      0 0 0 0.25rem var(--s-focus-default);
  }

.radio--variant-card:focus-within .radio__box {
      box-shadow: none;
    }

.radio--variant-card:hover:not(.radio--disabled) {
    background-color: var(--s-state-hovered);
  }

.radio--variant-card:active:not(.radio--disabled) {
    background-color: var(--s-state-pressed);
  }

.radio--variant-card.radio--checked:not(.radio--disabled) {
    border-color: var(--s-border-highlight);
  }

.radio--variant-card.radio--invalid:not(.radio--disabled) {
    border-color: var(--s-border-critical);
  }

.radio--checked .radio__control:hover .radio__box {
        border-color: var(--s-interactive-primary-hovered);
        background-color: var(--s-interactive-primary-hovered);
      }

.radio--checked .radio__box {
    position: relative;
    border-color: var(--s-icon-highlight);
    background-color: var(--s-icon-highlight);
  }

.radio--checked .radio__box:after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: var(--s-background-default);
      content: "";
      transform: translate3d(-50%, -50%, 0);
    }

.radio--invalid.radio--checked .radio__box, .radio--invalid.radio--indeterminate .radio__box {
      background-color: var(--s-icon-critical);
    }

.radio--invalid .radio__box {
    border-color: var(--s-icon-critical);
  }

.radio--disabled {
  cursor: default;
}

.radio--disabled.radio--checked .radio__control:hover .radio__box {
          border-color: var(--s-icon-disabled);
          background-color: transparent;
        }

.radio--disabled.radio--checked .radio__box {
      border-color: var(--s-icon-disabled);
      background-color: var(--s-background-default);
    }

.radio--disabled.radio--checked .radio__box:after {
        background-color: var(--s-icon-disabled);
      }

.radio--disabled .radio__control:hover .radio__box {
        background-color: transparent;
      }

.radio--disabled .radio__box {
    border-color: var(--s-icon-disabled);
  }

.radio--disabled .radio__description,
  .radio--disabled .radio__label {
    color: var(--s-text-disabled);
  }

.radio__control {
  position: relative;
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  padding: var(--s-space-2);
  flex-shrink: 0;
}

.radio__control:hover .radio__box {
      background-color: var(--s-action-neutral-hovered);
    }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.radio__control {
    width: 1.375rem;
    height: 1.375rem
}
  }

.radio__box {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  border: 0.125rem solid var(--s-icon-default);
  border-radius: 50%;
}

.radio__label-container {
  display: inline-flex;
  margin-left: var(--s-space-8);
  padding-top: var(--s-space-2);
  flex-direction: column;
}

.radio__label {
  display: flex;
  align-items: center;
  font-weight: var(--s-font-weight-medium);
  gap: var(--s-space-8);
}

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.radio__label {
    font-size: var(--s-font-size-sm);
    line-height: var(--s-line-height-sm)
}
  }

.radio__description {
  color: var(--s-text-subdued);
}

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.radio__description {
    font-size: var(--s-font-size-sm);
    line-height: var(--s-line-height-sm)
}
  }