@use '../../util/util.scss';

.button {
  transition: var(--transition);
  color: var(--text200);
  background-color: var(--bg200);
  font-size: var(--fontM);
  border-radius: var(--borderRadius);
  padding: 4px 12px;
  box-shadow: var(--dropShadow);
  cursor: pointer;
  border: var(--border) var(--text400);
  font-weight: var(--weightMedium);

  &:enabled {
    &:hover {
      background-color: var(--bg300);
      transform: scale(1.05);
    }

    &:active {
      transition: none;
      box-shadow: var(--innerShadow);
      transform: scale(1);
    }
  }

  &.primary {
    color: var(--text100);
    border-color: var(--primary);
    //font-weight: var(--weightBold);
    background-color: var(--primary20);
    &:enabled {
      &:hover {
        background-color: var(--primary70);
        border-color: var(--primary);
      }
    }
  }
}