@import "settings";

$button-hover-opacity: 0.2;
button {
  background-color: $bg;
  border: 1px solid $color;
  color: $color;
  cursor: pointer;
  font-size: $font-size;
  min-height: 34px;
  min-width: 70px;
  outline: none;
  overflow-x: hidden;
  padding: 4px $padding-big;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: lowercase;
  transition: background-color .4s ease-in-out, color .2s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: fit-content;

  &:hover {
    background: set-alpha('color', $button-hover-opacity);
  }

  &.with-margin {
    margin: 0 $padding-small;
  }

  // ****************************************************************
  // SUBTLE

  &.primary {
    border-color: $primary;
    &:hover {
      background: set-alpha('primary', $button-hover-opacity);
    }
  }

  // "accent" & "secondary" classes now set to default, to match fluid 5
  &.accent, &.secondary {
    color: $color !important;
    &:hover {
      background: set-alpha('color', $button-hover-opacity);
    }
  }

  &.error {
    color: $error;
    border-color: $error;
    &:hover {
      background: set-alpha('error', $button-hover-opacity);
    }

  }

  // ****************************************************************
  // BOLD

  &.bold {
    background-color: set-alpha('color', $button-hover-opacity * 0.5);
    border-style: none;

    &:hover {
      background-color: set-alpha('color', $button-hover-opacity);
    }

    &.primary {
      background-color: $primary;
      color: $bg !important;
      &:hover {
        background-color: adjust-lightness('primary', var(--hover-lighten));
      }
    }

    // "accent" and "secondary" classes now set to default, to match fluid 5
    &.accent, &.secondary {
      color: $color !important;
    }

    &.error {
      background-color: $error;
      color: $bg !important;
      &:hover {
        background-color: adjust-lightness('error', var(--hover-lighten));
      }
    }

  }

  // ****************************************************************
  // DISABLED

  &:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

}