@mixin button-font {
  font-family: $font-family-display;
  font-size: map-get($font-size-aliases, "template");
}

@mixin button-white-text {
  color: $base-0;

  .Article & {
    color: $base-0;
  }
}

button {
  @include button-font;
}

.Button {
  @include button-font;
  align-items: center;
  border: transparent 1px solid;
  border-radius: 5px;
  color: map-get($color-aliases, "text-base");
  display: flex;
  gap: 10px;
  justify-content: center;
  line-height: map-get($line-heights, "default");
  padding: 11px 15px;
  text-decoration: none !important; // button labels should never have underlines
  transition: background-color $transition-speed, border-color $transition-speed;

  &--inline {
    display: inline-flex;
  }

  .Article & {
    @media (min-width: $screen-xs) {
      display: inline-flex;
    }
  }

  &:last-child {
    margin-right: 0;
  }
}

.Button--primary {
  @include button-white-text;
  background-color: map-get($color-aliases, "button-primary");
  border-color: map-get($color-aliases, "button-primary");
  font-weight: 500;

  &:hover {
    background-color: map-get($color-aliases, "button-primary-hover");
  }
}

.Button--purple {
  @include button-white-text;
  background-color: map-get($color-aliases, "button-purple");
  border-color: map-get($color-aliases, "button-purple");
  color: $base-0;
  font-weight: 500;

  &:hover {
    background-color: map-get($color-aliases, "button-purple-hover");
  }
}

.Button--default {
  background-color: $base-0;
  color: map-get(
    $color-aliases,
    "text-base"
  ) !important; // override possible nested content styling
  font-weight: 500;
  box-shadow: $box-shadow-depth-100;
  transition: background-color $transition-speed, border-color $transition-speed,
    box-shadow $transition-speed;

  &:hover {
    background-color: map-get($color-aliases, "panel-background");
    box-shadow: $box-shadow-depth-100-hover;
  }
}

.Button--link {
  gap: 4px;
  margin: 0;
  padding: 0;
}

.Button--small {
  padding: 7px 15px;
}

.Button--dropdown {
  &::after {
    background: transparent url("~/images/icons/angle-down.svg") 50% 50%
      no-repeat;
    content: "";
    height: 8px;
    width: 8px;
  }
}

.Button__icon {
  height: 24px;
  width: 24px;

  &--16x16 {
    height: 16px;
    width: 16px;
  }
}

.Button__right-arrow {
  width: 12px;

  &::after {
    content: "→";
  }
}

.Button--primary {
  .Button__right-arrow {
    color: $base-0;
  }
}
