/*
  types: .a-btn--secondary, .a-btn--tertiary (primary default)
  destructive: .a-btn--destructive (works with primary/secondary/tertiary)
  sizes: .a-btn--xs, .a-btn--sm, .a-btn--lg (medium default)
  icons: .a-btn-icon + .a-btn-icon--leading or .a-btn-icon--trailing (icon-only if not --leading, or --trailing)
  states: .a-btn--active (forced active state)
*/

.a-btn {
  --pt: var(--lens-core-spacing-1);
  --pb: var(--lens-core-spacing-1);
  --pl: var(--lens-core-spacing-1-5);
  --pr: var(--lens-core-spacing-1-5);
  --pl-icon-offset: 0px;
  --pr-icon-offset: 0px;
  --icon-size: var(--lens-semantic-icon-size-lg);
  --lh: normal;
  --min-height: var(--lens-core-spacing-5);
  --radius: var(--lens-semantic-radius-lg);
  --gap: var(--lens-core-spacing-1);
  --font-size: var(--lens-semantic-font-label-xl-font-size);
  --font-weight: var(--lens-core-font-weight-semi-bold);
  --letter-spacing: var(--lens-semantic-font-text-body-letter-spacing);
  --bg: var(--lens-semantic-gradients-primary-default);
  --color: var(--lens-semantic-color-action-primary-on-primary);
  --border-color: var(--lens-core-color-transparent);
  --border-width: 0;
  --pad-top: var(--pt);
  --pad-bottom: var(--pb);
  --pad-left: calc(var(--pl) - var(--pl-icon-offset));
  --pad-right: calc(var(--pr) - var(--pr-icon-offset));
  appearance: none;
  box-sizing: border-box;
  background: var(--a-btn-bg, var(--bg));
  border: var(--a-btn-border-width, var(--border-width)) solid
    var(--a-btn-border-color, var(--border-color));
  border-radius: var(--a-btn-radius, var(--radius));
  color: var(--a-btn-color, var(--color));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--a-btn-min-height, var(--min-height));
  gap: var(--a-btn-gap, var(--gap));
  padding: var(--a-btn-padding-top, var(--pad-top)) var(--a-btn-padding-right, var(--pad-right))
    var(--a-btn-padding-bottom, var(--pad-bottom)) var(--a-btn-padding-left, var(--pad-left));
  font-family: var(--a-btn-font-family, var(--lens-semantic-font-family-label));
  font-size: var(--a-btn-font-size, var(--font-size));
  font-weight: var(--a-btn-font-weight, var(--font-weight));
  line-height: var(--a-btn-line-height, var(--lh));
  letter-spacing: var(--a-btn-letter-spacing, var(--letter-spacing));
  text-decoration: none;
  white-space: nowrap;
  transition-property: background, color, box-shadow;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  --atlas-icon-size: lg;
  &:hover {
    --bg: var(--lens-semantic-gradients-primary-hover);
  }
  &:active,
  &.a-btn--active {
    --bg: var(--lens-semantic-gradients-primary-active);
  }
  &:focus-visible {
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: var(--lens-semantic-border-width-focus-offset);
  }
  &[disabled],
  &[aria-disabled="true"] {
    --bg: var(--lens-semantic-color-action-primary-disabled);
    --color: var(--lens-semantic-color-action-primary-on-primary-disabled);
    cursor: not-allowed;
  }
  &.a-btn--lg {
    --min-height: var(--lens-core-spacing-6);
    --pt: var(--lens-core-spacing-1-5);
    --pb: var(--lens-core-spacing-1-5);
  }
  &.a-btn--sm {
    --min-height: var(--lens-core-spacing-4);
    --radius: var(--lens-semantic-radius-md);
    --pt: var(--lens-core-spacing-0-5);
    --pb: var(--lens-core-spacing-0-5);
    --font-size: var(--lens-semantic-font-label-lg-font-size);
    --letter-spacing: var(--lens-semantic-font-label-lg-letter-spacing);
    --lh: calc(0.75rem - 1px);
    --icon-size: var(--lens-semantic-icon-size-md);
    --atlas-icon-size: md;
  }
  &.a-btn--xs {
    --min-height: var(--lens-core-spacing-3);
    --radius: var(--lens-semantic-radius-md);
    --pt: var(--lens-core-spacing-0-5);
    --pb: var(--lens-core-spacing-0-5);
    --pl: calc(var(--lens-core-spacing-1) + var(--lens-core-spacing-0-5));
    --pr: calc(var(--lens-core-spacing-1) + var(--lens-core-spacing-0-5));
    --gap: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
    --font-size: 0.75rem;
    --letter-spacing: var(--lens-semantic-font-label-sm-letter-spacing);
    --icon-size: var(--lens-semantic-icon-size-md);
    --atlas-icon-size: md;
  }
  &.a-btn--secondary {
    --bg: var(--lens-core-color-transparent);
    --color: var(--lens-semantic-color-action-secondary-on-secondary);
    --border-color: var(--lens-semantic-color-action-secondary-outline);
    --border-width: var(--lens-semantic-border-width-thin);
    --pad-top: calc(var(--pt) - var(--a-btn-border-width, var(--border-width)));
    --pad-bottom: calc(var(--pb) - var(--a-btn-border-width, var(--border-width)));
    --pad-left: calc(var(--pl) - var(--a-btn-border-width, var(--border-width)));
    --pad-right: calc(var(--pr) - var(--a-btn-border-width, var(--border-width)));
    &:hover {
      --bg: var(--lens-semantic-color-action-secondary-hover-fill);
    }
    &:active,
    &.a-btn--active {
      --bg: var(--lens-semantic-color-action-secondary-active-fill);
    }
    &[disabled],
    &[aria-disabled="true"] {
      --bg: var(--lens-core-color-transparent);
      --color: var(--lens-semantic-color-action-secondary-on-secondary-disabled);
      --border-color: var(--lens-semantic-color-action-secondary-disabled-outline);
    }
  }
  &.a-btn--tertiary {
    --bg: var(--lens-core-color-transparent);
    --color: var(--lens-semantic-color-action-secondary-on-secondary);
    &:hover {
      --bg: var(--lens-semantic-color-action-secondary-hover-fill);
    }
    &:active,
    &.a-btn--active {
      --bg: var(--lens-semantic-color-action-secondary-active-fill);
    }
    &[disabled],
    &[aria-disabled="true"] {
      --bg: var(--lens-core-color-transparent);
      --color: var(--lens-semantic-color-action-secondary-on-secondary-disabled);
    }
  }
  &.a-btn--destructive {
    --bg: var(--lens-semantic-gradients-destructive-default);
    --color: var(--lens-semantic-color-action-destructive-on-destructive);
    &:hover {
      --bg: var(--lens-semantic-gradients-destructive-hover);
    }
    &:active,
    &.a-btn--active {
      --bg: var(--lens-semantic-gradients-destructive-active);
    }
    &[disabled],
    &[aria-disabled="true"] {
      --bg: var(--lens-semantic-color-action-destructive-disabled);
      --color: var(--lens-semantic-color-action-destructive-on-destructive);
    }
    &.a-btn--secondary {
      --bg: var(--lens-core-color-transparent);
      --color: var(--lens-semantic-color-action-secondary-destructive-default);
      --border-color: var(--lens-semantic-color-action-secondary-destructive-default);
      &:hover {
        --bg: var(--lens-core-color-transparent);
        --color: var(--lens-semantic-color-action-secondary-destructive-hover);
        --border-color: var(--lens-semantic-color-action-secondary-destructive-hover);
      }
      &:active,
      &.a-btn--active {
        --bg: var(--lens-core-color-transparent);
        --color: var(--lens-semantic-color-action-secondary-destructive-active);
        --border-color: var(--lens-semantic-color-action-secondary-destructive-active);
      }
      &[disabled],
      &[aria-disabled="true"] {
        --bg: var(--lens-core-color-transparent);
        --color: var(--lens-semantic-color-action-secondary-destructive-on-secondary-disabled);
        --border-color: var(--lens-semantic-color-action-secondary-destructive-outline-disabled);
      }
    }
    &.a-btn--tertiary {
      --bg: var(--lens-core-color-transparent);
      --color: var(--lens-semantic-color-action-secondary-destructive-default);
      &:hover {
        --bg: var(--lens-core-color-transparent);
        --color: var(--lens-semantic-color-action-secondary-destructive-hover);
      }
      &:active,
      &.a-btn--active {
        --bg: var(--lens-core-color-transparent);
        --color: var(--lens-semantic-color-action-secondary-destructive-active);
      }
      &[disabled],
      &[aria-disabled="true"] {
        --bg: var(--lens-core-color-transparent);
        --color: var(--lens-semantic-color-action-secondary-destructive-on-secondary-disabled);
      }
    }
  }
  & .a-btn-icon {
    &:is(svg),
    & svg {
      fill: currentColor;
    }
    width: var(--a-btn-icon-size, var(--icon-size));
    height: var(--a-btn-icon-size, var(--icon-size));
  }
  &:has(.a-btn-icon--leading) {
    --pl-icon-offset: var(--lens-core-spacing-0-5);
    &.a-btn--xs {
      --pt: var(--lens-core-spacing-0-25);
      --pb: var(--lens-core-spacing-0-25);
      --pl-icon-offset: var(--lens-core-spacing-1);
    }
  }
  &:has(.a-btn-icon--trailing) {
    --pr-icon-offset: var(--lens-core-spacing-0-5);
    &.a-btn--xs {
      --pt: var(--lens-core-spacing-0-25);
      --pb: var(--lens-core-spacing-0-25);
      --pr-icon-offset: var(--lens-core-spacing-0-5);
    }
  }
  &:has(.a-btn-icon:not(.a-btn-icon--leading):not(.a-btn-icon--trailing)) {
    --pt: var(--lens-core-spacing-1);
    --pb: var(--lens-core-spacing-1);
    --pl: var(--lens-core-spacing-1);
    --pr: var(--lens-core-spacing-1);
    &.a-btn--lg {
      --pt: var(--lens-core-spacing-1-5);
      --pb: var(--lens-core-spacing-1-5);
      --pl: var(--lens-core-spacing-1-5);
      --pr: var(--lens-core-spacing-1-5);
    }
    &.a-btn--sm {
      --pt: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
      --pb: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
      --pl: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
      --pr: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
    }
    &.a-btn--xs {
      --pt: var(--lens-core-spacing-0-25);
      --pb: var(--lens-core-spacing-0-25);
      --pl: var(--lens-core-spacing-0-25);
      --pr: var(--lens-core-spacing-0-25);
    }
  }
  @container style(--atlas-theme: atlas) {
    --gap: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
    --pl: var(--lens-core-spacing-1);
    --pr: var(--lens-core-spacing-1);
    --font-size: var(--lens-semantic-font-label-lg-font-size);
    --font-weight: var(--lens-core-font-weight-medium);
    --letter-spacing: var(--lens-semantic-font-label-lg-letter-spacing);
    &.a-btn--lg {
      --pl: var(--lens-core-spacing-2);
      --pr: var(--lens-core-spacing-2);
      --gap: var(--lens-core-spacing-1);
      --font-size: var(--lens-semantic-font-label-xl-font-size);
      --letter-spacing: var(--lens-semantic-font-label-xl-letter-spacing);
    }
    &.a-btn--sm {
      --pl: var(--lens-core-spacing-1);
      --pr: var(--lens-core-spacing-1);
      --gap: var(--lens-core-spacing-0-25);
      --lh: normal;
    }
    &.a-btn--xs {
      --pl: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
      --pr: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
      --gap: var(--lens-core-spacing-0-25);
      --font-size: 0.75rem;
    }
    &:has(.a-btn-icon--leading) {
      --pl-icon-offset: var(--lens-core-spacing-0-5);
      &.a-btn--xs {
        --pl-icon-offset: var(--lens-core-spacing-0-25);
      }
    }
    &:has(.a-btn-icon--trailing) {
      --pr-icon-offset: var(--lens-core-spacing-0-5);
      &.a-btn--xs {
        --pr-icon-offset: var(--lens-core-spacing-0-25);
      }
    }
    &:has(.a-btn-icon:not(.a-btn-icon--leading):not(.a-btn-icon--trailing)) {
      --pl: var(--lens-core-spacing-1);
      --pr: var(--lens-core-spacing-1);
      &.a-btn--lg {
        --pl: var(--lens-core-spacing-1-5);
        --pr: var(--lens-core-spacing-1-5);
      }
      &.a-btn--sm {
        --pl: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
        --pr: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
      }
      &.a-btn--xs {
        --pl: var(--lens-core-spacing-0-25);
        --pr: var(--lens-core-spacing-0-25);
      }
    }
  }
}