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

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

  &: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;
      box-shadow: none;

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

.btn-link-icon {
  width: 3rem;
  height: 3rem;
  background-color: #999;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  border: 1px solid #DDD;
  border-radius: $button-radius-soft;

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

  svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  &.is-whited {
    width: auto;
    height: auto;
    background-color: transparent;
    display: inline-flex;
    border: 0;
    color: #FFF;
    padding: 0.2rem;

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

    svg {
      width: 1.625rem;
      height: 1.625rem;
    }
  }

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