@import 'themes/default';
@import 'themes/bandit';

.AddButton {
  display: var(--AddButton____display);
  align-items: var(--AddButton____alignment);
  justify-content: var(--AddButton____justification);
  column-gap: var(--AddButton____flex-gap);
  font-weight: var(--AddButton____font-weight);
  border-radius: var(--AddButton____radius);
  transition-property: color, background-color, border-color, padding, width;
  transition-duration: var(--AddButton____transition-duration);
  border-width: var(--AddButton____border-width);
  border-style: var(--AddButton____border-style);
  cursor: var(--AddButton____cursor);
  outline-offset: var(--AddButton____outline-offset);

  // Default state colors
  color: var(--AddButton____color);
  background-color: var(--AddButton____bg-color);
  border-color: var(--AddButton____border-color);

  // Hover state colors
  &:hover,
  &:focus-visible {
    color: var(--AddButton--hover____color);
    background-color: var(--AddButton--hover____bg-color);
    border-color: var(--AddButton--hover____border-color);
  }

  // Active/pressed state colors
  &:active {
    color: var(--AddButton--active____color);
    background-color: var(--AddButton--active____bg-color);
    border-color: var(--AddButton--active____border-color);
  }

  // Internal label styling
  span {
    font-size: var(--AddButton____font-size);
    font-weight: var(--AddButton____font-weight);
    white-space: nowrap;
  }

  // Prevent children from growing or shrinking
  > * {
    flex: none;
  }

  &[disabled] {
    cursor: var(--AddButton--disabled____cursor);
    color: var(--AddButton--disabled____color);
    background-color: var(--AddButton--disabled____bg-color);
    border-color: var(--AddButton--disabled____border-color);
  }

  // Variant related styles
  &--collapsed {
    padding: var(--AddButton--collapsed____padding);
  }

  &--short {
    padding: var(--AddButton--short____padding);
  }

  &--tall {
    padding: var(--AddButton--tall____padding);
  }

  &--full-width {
    width: var(--AddButton--full-width____width);
  }
}