// Actions - Shared actions across components

@import "../base-shared";

@mixin actionShare() {
  position: relative;

  &__trigger {
    @include removeButton();
    padding: $size-S 0;
  }

  &__list {
    @include unstyledList();
    position: absolute;
    top: 100%;
    left: -50%;
    float: left;
    min-width: rem(250px);
    background-color: $color-white;
    border: 1px solid $color-gray-light;
    @include boxShadow(1);

    @include media($SM) {
      left: 0;
    }
  }

  &__list[aria-hidden="true"] {
    display: none;
  }

  &__list::before,
  &__list::after {
    content: "";
    display: block;
    position: absolute;
    left: 35%;
    width: 0;
    height: 0;
    border-style: solid;

    @include media($SM) {
      left: 25%;
    }

    @include media($M) {
      left: 15%;
    }
  }

  &__list::before {
    top: rem(-25px);
    border-color: transparent transparent $color-gray-light transparent;
    border-width: 12px;
  }

  &__list::after {
    top: rem(-23px);
    border-color: transparent transparent $color-white transparent;
    border-width: 12px;
  }

  &__list.is-disabled {
    opacity: $layer-disabled;
  }

  &__list &__item {
    display: inline-block;
    float: left;
  }

  &__item .short-url {
    display: block;
    padding: $size-base $size-S;
    font-size: $small-font-size;
    color: $color-base;
  }

  &__link {
    display: block;
    padding: $size-S;
    color: $color-primary;

    &:visited {
      color: $color-primary;
    }

    .fa {
      font-size: $h3-font-size;
    }

    &.email {
      color: $color-gold;
    }

    &.google {
      color: $color-secondary-dark;
    }

    &.twitter {
      color: $color-primary-alt;
    }

    &.linkedin {
      color: $color-primary-darkest;
    }

    &.link {
      color: $color-gray;
    }
  }
}