@use "variables";
@use "sass:color";

.button {
  background-color: variables.$black;
  border: 0;
  border-radius: variables.$border-radius;
  color: variables.$grey-30;
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  padding: 0.75em 1.3em;
  text-align: center;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
  white-space: nowrap;

  &:hover {
    background-color: variables.$berta-accent;
    color: variables.$white;
  }

  &:focus,
  &:active {
    background-color: color.adjust(variables.$berta-accent, $lightness: -10%);
    color: color.adjust(variables.$grey-30, $lightness: -10%);
  }

  &.secondary {
    background-color: variables.$grey-20;
    color: variables.$white;
  }

  &.inverse {
    background-color: variables.$white;
    color: variables.$black;
    box-shadow: inset 0 0 0 1px variables.$black;

    &:hover {
      color: variables.$berta-accent;
      box-shadow: inset 0 0 0 1px variables.$berta-accent;
    }
  }

  &.disabled,
  &[disabled] {
    background-color: variables.$grey-10;
    pointer-events: none;
  }
}

button {
  &.close {
    background: none;
    cursor: pointer;
  }
}
