/* Button Group */

@layer components {
  .btn-group {
    position: relative;
    z-index: 0;
    display: inline-flex;
    border-radius: var(--radius-control);
    margin-left: calc(-1 * var(--button-group-border-width));
  }

  .btn-group-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--button-group-padding);
    border: var(--button-group-border-width) solid
      var(--button-group-border-color);
    font-size: var(--button-group-font-size);
    font-weight: var(--button-group-font-weight);
    transition: var(--button-base-transition);
    margin-left: calc(-1 * var(--button-group-border-width));
  }

  .btn-group-item:first-child {
    border-top-left-radius: var(--radius-control);
    border-bottom-left-radius: var(--radius-control);
  }

  .btn-group-item:last-child {
    border-top-right-radius: var(--radius-control);
    border-bottom-right-radius: var(--radius-control);
  }

  .btn-group-item:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  /* Button Group States */
  .btn-group-item:not(:disabled) {
    background: var(--button-group-bg);
    color: var(--button-group-color);
    cursor: pointer;
  }

  .btn-group-item:not(:disabled):hover {
    background: var(--button-group-hover-bg);
  }

  .btn-group-item.selected {
    background: var(--button-group-selected-bg);
    color: var(--button-group-selected-color);
  }

  .btn-group-item:disabled {
    background: var(--button-group-disabled-bg);
    color: var(--button-group-disabled-color);
    cursor: not-allowed;
  }

  .btn-group-item:disabled:hover {
    background: var(--button-group-disabled-bg);
  }

  /* Non-selectable button group */
  .btn-group-non-selectable .btn-group-item:not(:disabled) {
    cursor: pointer;
  }

  .btn-group-non-selectable .btn-group-item:disabled {
    cursor: not-allowed;
  }

  .btn-group-non-selectable .btn-group-item:hover {
    background: var(--button-group-bg);
  }

  .btn-group-non-selectable .btn-group-item.selected {
    background: var(--button-group-bg);
    color: var(--button-group-selected-color);
  }

  /* Toggle Button Component - extends ButtonComponent but uses selected state */
  .btn.selected {
    background: var(--button-group-selected-bg);
    color: var(--button-group-selected-color);
  }

  .btn.selected:hover {
    background: var(--button-group-selected-bg);
    opacity: var(--button-hover-opacity);
  }

  /* Toggle Button Component */
  .btn-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--button-group-padding);
    border: var(--button-group-border-width) solid
      var(--button-group-border-color);
    border-radius: var(--radius-control);
    font-size: var(--button-group-font-size);
    font-weight: var(--button-group-font-weight);
    transition: var(--button-base-transition);
    background: var(--button-group-bg);
    color: var(--button-group-color);
    cursor: pointer;
  }

  .btn-toggle:hover {
    background: var(--button-group-hover-bg);
  }

  .btn-toggle.selected {
    background: var(--button-group-selected-bg);
    color: var(--button-group-selected-color);
  }

  .btn-toggle:disabled {
    background: var(--button-group-disabled-bg);
    color: var(--button-group-disabled-color);
    cursor: not-allowed;
  }

  .btn-toggle:disabled:hover {
    background: var(--button-group-disabled-bg);
  }
}