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

/**
 * Initializes checkbox button group
 */
.slds-checkbox_button-group {
  display: inline-flex;
  background-color: var(--slds-g-color-surface-container-1);
  border-radius: var(--slds-s-button-radius-border, var(--slds-g-radius-border-2));
}

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

  /**
   * Creates a custom styled checkbox
   */
  .slds-checkbox_faux {
    padding-inline: var(--slds-g-spacing-4);
    text-align: center;
    vertical-align: middle;
    position: relative;
    background-color: var(--slds-g-color-surface-container-1);
    transition:
      border 0.1s linear,
      background-color 0.1s linear;
  }

  /**
    * Creates a custom styled checkbox
    */
  .slds-checkbox_button__label .slds-checkbox_faux,
  [type='checkbox']:checked + .slds-checkbox_button__label .slds-checkbox_faux {
    background-color: transparent;
  }

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

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

  /**
   * Dealing with box shadows on specific n children of the button group
   */
  &:first-child > .slds-checkbox_faux,
  &:first-child > .slds-checkbox_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-checkbox_faux,
  .slds-button_last > .slds-checkbox_faux,
  &:last-child > .slds-checkbox_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;
  }

  &:first-child:hover {
    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 {
    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;
  }

  [type='checkbox'] {
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;

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

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

    &:not([disabled]) + .slds-checkbox_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-checkbox_button__label:active {
      box-shadow:
        0 0 0 0 transparent,
        var(--slds-s-button-shadow-active);
      transform: none;
    }

    &:not([disabled]):checked + .slds-checkbox_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);
    }

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

    &:checked + .slds-checkbox_faux:hover,
    &:checked ~ .slds-checkbox_faux:hover,
    &:checked + .slds-checkbox_button__label:hover,
    &:checked + .slds-checkbox_faux:focus,
    &:checked ~ .slds-checkbox_faux:focus,
    &:checked + .slds-checkbox_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-checkbox_faux,
    &:focus-visible ~ .slds-checkbox_faux,
    &:focus-visible + .slds-checkbox_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;
    }

    /* Checked Focus State */
    &:checked:focus-visible + .slds-checkbox_faux,
    &:checked:focus-visible ~ .slds-checkbox_faux,
    &:checked:focus-visible + .slds-checkbox_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-checkbox_faux,
    &[disabled] ~ .slds-checkbox_faux,
    &[disabled] + .slds-checkbox_button__label {
      background-color: var(--slds-g-color-disabled-container-1);
      color: var(--slds-g-color-on-disabled-2);
    }

    /* Disabled Checked State */
    &[disabled]:checked + .slds-checkbox_faux,
    &[disabled]:checked ~ .slds-checkbox_faux,
    &[disabled]:checked + .slds-checkbox_button__label {
      background-color: var(--slds-g-color-disabled-container-2);
      color: var(--slds-g-color-on-disabled-1);
    }

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

/**
 * Label element inside of a checkbox button
 */
.slds-checkbox_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);
  }
}