/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * @summary Initializes radio button
 */
.slds-radio_button-group {
  display: inline-flex;
  border-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
}

.slds-radio_button {
  display: flex;
  border: 0;
  border-radius: 0;
  background-clip: padding-box;
  line-height: 1.875rem;
  --slds-c-button-spacing-inline: 0;

  /**
   * Create styled button when adjacent to the input[radio] element
   */
  .slds-radio_faux {
    padding-inline-start: var(--slds-g-spacing-4);
    padding-inline-end: var(--slds-g-spacing-4);
    text-align: center;
    vertical-align: middle;
  }

  + .slds-radio_button {
    border-inline-end: 0;
    margin: 0;
  }

  & > .slds-radio_faux,
  & > .slds-radio_button__label {
    margin-inline-start: calc(var(--slds-g-sizing-border-1) * -1);
  }

  &:first-child:hover,
  &:first-child:focus {
    border-start-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
  }

  &:last-child:hover,
  &:last-child:focus {
    border-start-start-radius: 0;
    border-start-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
    border-end-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
    border-end-start-radius: 0;
  }

  &:first-child > .slds-radio_faux,
  &:first-child > .slds-radio_button__label {
    border-start-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
    margin-inline-start: auto;
  }

  &:last-child > .slds-radio_faux,
  .slds-button_last > .slds-radio_faux,
  &:last-child > .slds-radio_button__label {
    border-start-start-radius: 0;
    border-start-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
    border-end-end-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
    border-end-start-radius: 0;
  }

  /* Hide input and style radio_faux */
  [type='radio'] {
    width: var(--slds-g-sizing-border-1);
    height: var(--slds-g-sizing-border-1);
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;

    /* Checked State with Interactions */
    &:checked + .slds-radio_faux,
    &:checked ~ .slds-radio_faux,
    &:checked + .slds-radio_button__label {
      background-color: var(--slds-g-color-accent-container-1);
      color: var(--slds-g-color-on-accent-1);
    }

    &:checked:active + .slds-radio_faux,
    &:checked:active ~ .slds-radio_faux,
    &:checked:active + .slds-radio_button__label {
      box-shadow: var(--slds-s-button-shadow-active);
    }

    &:not([disabled]) + .slds-radio_button__label:hover {
      box-shadow: var(--slds-s-button-bordered-shadow-hover);
      transform: var(--slds-s-button-bordered-transform-hover);
      transition:
        transform 150ms ease-in-out,
        box-shadow 150ms ease-in-out;
    }

    &:not([disabled]) + .slds-radio_button__label:active {
      box-shadow:
        0 0 0 0 transparent,
        var(--slds-s-button-shadow-active);
      transform: none;
    }

    &:not([disabled]):checked + .slds-radio_button__label:hover {
      border-block-start-color: var(--slds-g-color-accent-container-2);
      border-block-end-color: var(--slds-g-color-accent-3);
      box-shadow: var(--slds-s-button-brand-shadow-hover);
      transform: var(--slds-s-button-brand-transform-hover);
      transition:
        transform 150ms ease-in-out,
        box-shadow 150ms ease-in-out;
    }

    &:not([disabled]):checked + .slds-radio_button__label:active {
      box-shadow:
        0 0 0 0 transparent,
        var(--slds-s-button-shadow-active);
      transform: none;
    }

    &:checked + .slds-radio_faux:hover,
    &:checked ~ .slds-radio_faux:hover,
    &:checked + .slds-radio_button__label:hover,
    &:checked + .slds-radio_faux:focus,
    &:checked ~ .slds-radio_faux:focus,
    &:checked + .slds-radio_button__label:focus {
      color: var(--slds-g-color-on-accent-2);
      background-color: var(--slds-g-color-accent-container-2);
    }

    /* Focus State  */
    &:focus-visible + .slds-radio_faux,
    &:focus-visible ~ .slds-radio_faux,
    &:focus-visible + .slds-radio_button__label {
      background-color: var(--slds-g-color-surface-container-2);
      z-index: 1;
      box-shadow: none;
      outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
      outline-offset: -1px;
    }

    /* Chcked Focus State  */
    &:checked:focus-visible + .slds-radio_faux,
    &:checked:focus-visible ~ .slds-radio_faux,
    &:checked:focus-visible + .slds-radio_button__label {
      background-color: var(--slds-g-color-accent-container-2);
      box-shadow: inset 0 0 0 3px var(--slds-g-color-neutral-base-100);
    }

    /* Disabled State  */
    &[disabled] + .slds-radio_faux,
    &[disabled] ~ .slds-radio_faux,
    &[disabled] + .slds-radio_button__label {
      background-color: var(--slds-g-color-disabled-container-1);
      color: var(--slds-g-color-on-disabled-2);
      box-shadow: none;
    }

    &[disabled]:checked + .slds-radio_faux,
    &[disabled]:checked ~ .slds-radio_faux,
    &[disabled]:checked + .slds-radio_button__label {
      background-color: var(--slds-g-color-disabled-container-2);
      color: var(--slds-g-color-on-disabled-2);
    }

    &[disabled] + .slds-radio_button__label:hover,
    &[disabled] + .slds-radio_button__label:focus {
      cursor: default;
    }
  }
}

/**
 * Label element inside of a radio button
 */
.slds-radio_button__label {
  background-color: var(--slds-g-color-surface-container-1);
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);

  &:hover,
  &:focus {
    cursor: pointer;
    background-color: var(--slds-g-color-surface-container-2);
  }
}