@use "../../tokens/color" as *;
@use "../../tokens/font" as *;
@use "../../tokens/spacing" as *;

.iati-button {
  --display: inline-flex; // Used by .display--* utilities

  display: var(--display);
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  background-color: $color-teal-90;
  border: none;
  color: white;
  font-family: $font-stack-heading;
  line-height: 1.1;
  padding: 0.7em;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  text-decoration: none;

  &:active,
  &:focus,
  &:hover {
    background-color: $color-teal-80;
    text-decoration: none;
  }

  &__icon,
  & .iati-icon {
    height: 1rem;
  }

  &--light {
    color: $color-grey-90;
    background-color: #fff;
    &:hover {
      background-color: $color-blue-30;
    }
  }

  &--submit {
    color: $color-grey-90;
    background-color: $color-green-40;
    &:hover {
      background-color: $color-green-50;
    }
  }

  &--compact {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  &--pill {
    color: $color-grey-90;
    background-color: $color-teal-10;
    border: 1px solid $color-teal-50;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    &:hover {
      background-color: white;
    }
  }

  &--remove {
    position: relative;
    padding-right: 2.1em;

    &::after {
      position: absolute;
      right: 0.7em;
      top: 50%;
      transform: translateY(-50%);
      content: "×";
      color: currentColor;
      pointer-events: none;
      padding-bottom: 0.1rem;
      font-size: 1em;
      transition: all 0.2s ease-in-out;
    }

    &:hover {
      &::after {
        color: $color-red-40;
        transition: all 0.2s ease-in-out;
      }
    }
  }
}