@import './theme.css';
@import './utilities.css';

.react-aria-ToggleButton {
  border: none;
  forced-color-adjust: none;
  border-radius: var(--radius);
  appearance: none;
  vertical-align: middle;
  font: var(--font-size) system-ui;
  font-weight: 500;
  text-align: center;
  margin: 0;
  height: var(--spacing-8);
  padding: 0 var(--spacing-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition-property: background, box-shadow, text-shadow, scale;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;

  > span {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  > span > svg {
    width: var(--spacing-4);
    height: var(--spacing-4);
  }

  &:has(> span > svg:only-child) {
    width: var(--spacing-8);
    padding: 0;
    border-radius: 9999px;
  }

  &[data-pressed] {
    scale: 0.95;
  }
}
