Share

// TOOLTIP:
// This tooltip can be reused, providing that, the parent:
// - has `position: relative;`
// - sets the visibility.
// If this is reused, it should be moved into it's own component
.tooltip {
  @include text-xs;

  background-color: $color-interface-light;
  border-radius: $border-radius;
  color: $white;
  left: 50%;
  margin-top: $spacing-s;
  padding: $spacing-s;
  position: absolute;
  transform: translateX(-50%);
  visibility: hidden;
  white-space: nowrap;

  &::before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid $color-interface-light;
    content: '';
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: -5px;
    transform: translateX(-50%);
    width: 0;
  }
}

.share {
  &__fallback {
    align-items: center;
    display: flex;

    button {
      appearance: none;
      border: none;
    }

    > p {
      @include text-xs;

      color: $color-interface-light;
      text-transform: uppercase;
      margin-top: 0.7rem;
    }
  }

  &__native {
    @include text-xs;

    align-items: center;
    color: $color-interface-light;
    background-color: rgba(196, 196, 196, 0.1);
    display: flex;
    border-radius: 2.5rem;
    border-width: 0;
    padding: $spacing-s $spacing-l;
    text-transform: uppercase;

    span {
      margin-top: 5px;
    }

    img {
      margin-left: $spacing-s;
    }
  }

  &__options {
    display: flex;
    justify-content: space-between;
    margin-left: $spacing-s;

    a,
    button {
      background-color: transparent;
      border-radius: $border-radius;
      display: block;
      margin: 0 $spacing-s;
      padding: 0;
      position: relative;
      transition: background-color 0.2s ease;

      &:hover,
      &:focus {
        cursor: pointer;

        img {
          filter: hue-rotate(-35deg) saturate(3);
        }
        .tooltip {
          visibility: visible;
        }
      }
      &:focus {
        @include focusOutline;
      }
    }
  }
}