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

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

.button {
  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);
  }
}