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

.Button-Mode {
  --focus--offset: var(--focus--width);

  background-color: var(--Button-Mode____bg-color);
  color: var(--Button-Mode____color);
  padding: var(--Button-Mode____padding);
  padding-left: var(--Button-Mode____horizontal-padding);
  padding-right: var(--Button-Mode____horizontal-padding);
  font-weight: var(--Button-Mode____font-weight);
  font-size: var(--Button-Mode____font-size);

  &:hover,
  &:focus-visible {
    background-color: var(--Button-Mode--hover____bg-color);
    color: var(--Button-Mode--hover____color);
  }

  &:active {
    background-color: var(--Button-mode--active____bg-color);
    color: var(--Button-Mode--active____color);
    transition-duration: var(--timing--click);
  }

  &--selected {
    background-color: var(--Button-Mode--selected____bg-color);
    color: var(--Button-Mode--selected____color);

    &:hover,
    &:focus-visible {
      background-color: var(--Button-Mode--selected--hover____bg-color);
      color: var(--Button-Mode--selected--hover____color);
    }

    &:active {
      background-color: var(--Button-Mode--selected--active____bg-color);
      color: var(--Button-Mode--selected--active____color);
    }
  }
}