.surface {
  background-color: var(--tutu-color-surface);
  color: var(--tutu-color-on-surface);
}

.touchTarget {
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.button {
  composes: buttonText from './typography.module.css';
  composes: touchTarget;

  border: none;
  background-color: transparent;
  color: var(--tutu-color-primary);
  font-family: inherit;

  &:focus,&:hover,&:focus-visible {
      background-color: var(--tutu-color-surface-dd);
  }

  &.pressed {
      background-color: var(--tutu-color-surface-d);
  }

  &.raised {
      background-color: var(--tutu-color-primary);
      color: var(--tutu-color-on-primary);
  }

  &:disabled, &[aria-disabled]:not([aria-disabled="false"]) {
      color: #9e9e9e;

      &:focus,&:hover,&:focus-visible {
          background-color: transparent;
      }
  }

  .toolbar &, .appbar & {
    height: 100%;
    margin-block: 0;
    padding-block: 0;
    border-radius: 0;
  }

  .appbar & {
    color: var(--tutu-color-on-primary);

    &:focus,&:hover,&:focus-visible {
      background-color: var(--tutu-color-primary-ll);
    }

    &.pressed {
      background-color: var(--tutu-color-primary-l);
    }
  }

  .toolbar & {
    color: var(--tutu-color-on-surface);
  }
}