@use "sass:color";
@use "./variables" as *;
@use "./tokens" as *;

@mixin elevated-button($base, $hover, $foreground: #FFF) {
  background: $base;
  border-color: $base;
  color: $foreground;

  &:hover {
    background: $hover;
    border-color: $hover;
  }

  &.is-bordered {
    background: transparent;
    border-color: $base;
    color: $base;

    &:hover {
      background: color.change($base, $alpha: 0.08);
      border-color: $hover;
      color: $hover;
    }
  }

  &.is-flat {
    background: color.change($base, $alpha: 0.12);
    border-color: color.change($base, $alpha: 0.16);
    color: $base;

    &:hover {
      background: color.change($hover, $alpha: 0.16);
      border-color: color.change($hover, $alpha: 0.22);
      color: $hover;
    }

    &.is-bordered {
      background: transparent;
      border-color: $base;
      color: $base;

      &:hover {
        background: color.change($hover, $alpha: 0.1);
        border-color: color.change($hover, $alpha: 0.28);
        color: $hover;
      }
    }
  }

  &.is-neutral {
    background: $neutral-surface-soft;
    border-color: $neutral-border;
    color: $neutral-text;

    &:hover {
      background: $neutral-surface;
      border-color: $neutral-surface-hover;
      color: $neutral-text;
    }

    &.is-bordered {
      background: transparent;
      border-color: $neutral-border;
      color: $neutral-text;

      &:hover {
        background: $neutral-surface;
        border-color: $neutral-surface-hover;
        color: $neutral-text;
      }
    }
  }
}

@mixin soft-button($base, $hover) {
  background: color.change($base, $alpha: 0.08);
  border-color: color.change($base, $alpha: 0.22);
  color: $base;

  &:hover {
    background: color.change($hover, $alpha: 0.12);
    border-color: color.change($hover, $alpha: 0.28);
    color: $hover;
  }

  &.is-bordered {
    background: transparent;
    border-color: color.change($base, $alpha: 0.24);
    color: $base;

    &:hover {
      background: color.change($hover, $alpha: 0.08);
      border-color: color.change($hover, $alpha: 0.28);
      color: $hover;
    }
  }

  &.is-flat {
    background: color.change($base, $alpha: 0.12);
    border-color: color.change($base, $alpha: 0.16);
    color: $base;

    &:hover {
      background: color.change($hover, $alpha: 0.16);
      border-color: color.change($hover, $alpha: 0.22);
      color: $hover;
    }

    &.is-bordered {
      background: transparent;
      border-color: color.change($base, $alpha: 0.24);
      color: $base;

      &:hover {
        background: color.change($hover, $alpha: 0.1);
        border-color: color.change($hover, $alpha: 0.28);
        color: $hover;
      }
    }
  }

  &.is-neutral {
    background: $neutral-surface-soft;
    border-color: $neutral-border;
    color: $neutral-text;

    &:hover {
      background: $neutral-surface;
      border-color: $neutral-surface-hover;
      color: $neutral-text;
    }

    &.is-bordered {
      background: transparent;
      border-color: $neutral-border;
      color: $neutral-text;
      box-shadow: none;

      &:hover {
        background: $neutral-surface-soft;
        border-color: $neutral-surface-hover;
        color: $neutral-text;
      }
    }
  }
}

.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $button-icon-gap;
  min-height: 3rem;
  padding: 0.78rem 1.25rem;
  border: 1px solid #DDD;
  background-color: #DDD;
  text-decoration: none;
  color: #222;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  border-radius: $button-radius-soft;

  &:hover { border-color: #94A3B8; }

  &:focus-visible {
    outline: $button-focus-outline;
    outline-offset: $button-focus-offset;
    box-shadow: $button-focus-ring;
  }

  span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &.btn-link-facebook {
    @include elevated-button($c-facebook-100, $c-facebook-200);
  }

  &.btn-link-email {
    @include soft-button($c-email-100, $c-email-200);
  }

  &.btn-link-twitter {
    @include elevated-button($c-twitter-100, $c-twitter-200);
  }

  &.btn-link-tumblr {
    @include elevated-button($c-tumblr-100, $c-tumblr-200);
  }

  &.btn-link-pinterest {
    @include elevated-button($c-pinterest-100, $c-pinterest-200);
  }

  &.btn-link-linkedin {
    @include elevated-button($c-linkedin-100, $c-linkedin-200);
  }

  &.btn-link-reddit {
    @include elevated-button($c-reddit-100, $c-reddit-200);
  }

  &.btn-link-whatsapp {
    @include elevated-button($c-whatsapp-100, $c-whatsapp-200);
  }

  &.btn-link-telegram {
    @include elevated-button($c-telegram-100, $c-telegram-200);
  }

  &.btn-link-pocket {
    @include elevated-button($c-pocket-100, $c-pocket-200);
  }

  &.btn-link-copy {
    @include elevated-button($c-copy-100, $c-copy-200);
  }

  &.is-rounded {
    border-radius: $button-radius-rounded;
  }

  &.is-circled {
    border-radius: $button-radius-circled;
  }

  svg {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}