@use "settings";
@use "mixins";

$button-hover-opacity: 0.2;
button {
  background-color: settings.$bg;
  border: 1px solid settings.$color;
  color: settings.$color;
  cursor: pointer;
  font-size: settings.$font-size;
  min-height: 34px;
  min-width: 70px;
  outline: none;
  overflow-x: hidden;
  padding: 4px settings.$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: mixins.set-alpha('color', $button-hover-opacity);
  }

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

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

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

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

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

  }

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

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

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

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

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

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

  }

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

  &:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    .mat-icon {
      color: settings.$disabled;
      cursor: not-allowed;
    }
  }

}