@use "sass:color";
@use "../mixins";

button,
input[type="submit"],
a.button,
input.button {
  position: relative;
  @include mixins.button-defaults;

  &.secondary {
    background-color: var(--button-secondary-bg-color);
    color: var(--button-secondary-text-color);
    border-color: var(--button-secondary-border-color);

    &:focus:not([disabled]):not(.disabled) {
      @include mixins.default-focus-style(
        $border-color: var(--button-focus-border-color),
        $box-shadow: var(--button-focus-box-shadow)
      );
    }

    &:hover:not([disabled]):not(.disabled) {
      background-color: var(--button-secondary-hover-bg-color);
      border-color: var(--button-secondary-hover-border-color);
    }

    &:active:not([disabled]):not(.disabled) {
      border-color: var(--button-hover-border-color);
      box-shadow: none;
    }
  }

  &.small {
    padding: var(--button-small-padding);
    line-height: var(--spacing-4);
    font-size: var(--font-size_small);
  }

  &.with_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);

    alchemy-icon {
      fill: currentColor;
    }
  }
}

.icon_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-width);
  height: var(--icon-button-height);
  margin: 0;
  padding: 0;
  text-shadow: none;
  border-radius: var(--border-radius_medium);
  color: var(--icon-color);

  &.small {
    width: var(--icon-button-small-width);
    height: var(--icon-button-small-height);
    background: none;
    border: none;
    padding: 0; // button.small has padding
  }

  &.active,
  &:active,
  &:hover:not([disabled]):not(.disabled):not(.linked) {
    text-decoration: none;
    background-color: var(--icon-button-hover-bg-color);
    cursor: pointer;
  }

  .icon {
    transition: fill 250ms;
  }

  &.disabled,
  &[disabled] {
    pointer-events: none;

    svg {
      opacity: 0.3;
    }

    &:hover {
      text-decoration: none;
      cursor: default;
    }
  }

  &.linked {
    @include mixins.button-defaults(
      $background-color: var(--icon-button-linked-color),
      $hover-color: var(--icon-button-linked-hover-color),
      $border: 1px solid var(--icon-button-linked-border-color),
      $hover-border-color: var(--icon-button-linked-hover-border-color),
      $box-shadow: none,
      $padding: 3px,
      $margin: 0
    );
  }

  &:focus:not(.disabled):not([disabled]) {
    @include mixins.default-focus-style;
  }

  .spinner {
    position: static;
    transform: none;
  }
}

button.icon_button {
  background: transparent;
  border: 0 none;
  box-shadow: none;
  font-weight: normal;

  &:disabled,
  &.disabled {
    background: transparent;
  }
}

#new_element button.button {
  float: right;
}
