@use 'Foundation/scss/button-chains' as chains;

$icon-button-seam: ':where(:not(.icon-button--priority-secondary.icon-button--disabled.icon-button--skin-ai, .icon-button--priority-secondary.icon-button--disabled.icon-button--skin-dark, .icon-button--priority-secondary.icon-button--disabled.icon-button--skin-destructive, .icon-button--priority-secondary.icon-button--skin-light:active, .icon-button--priority-secondary.icon-button--skin-premium:active))';

.split-action {
  display: inline-flex;
  align-items: center;

  &__divider {
    height: chains.$button-size-medium;
  }

  & &__divider {
    min-height: auto;
  }

  &--size-tiny &__divider {
    height: chains.$button-size-tiny;
  }

  &--size-small &__divider {
    height: chains.$button-size-small;
  }

  &--size-medium &__divider {
    height: chains.$button-size-medium;
  }

  &--size-large &__divider {
    height: chains.$button-size-large;
  }

  &__item {
    display: contents;
  }

  /* Doubled so it beats Button's root border and outline, which load later in the bundle. */
  &__button#{&}__button {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    border: 1px solid var(--wds-internal-button-border-color, transparent);
  }

  & > :first-child &__button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }

  & > :last-child &__button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }

  & > :not(:first-child):not(:last-child) &__button {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  & > :first-child &__icon-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & > :last-child &__icon-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  &#{&} > :first-child &__icon-button#{$icon-button-seam} {
    border-right: 0;
  }

  &#{&} > :last-child &__icon-button#{$icon-button-seam} {
    border-left: 0;
  }

  &#{&} > :not(:first-child):not(:last-child) &__icon-button {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}