@import "../../../sass/webpack_deps";

/// ----------------------------------------------------------------------------
/// Settings map
///
/// Settings are called via the `get` method, which is simply an alias for
/// Sass's `map-get` method.
///
/// @usage
/// `get($map-name, "setting-name")`
/// ----------------------------------------------------------------------------

$social-share: (
  'background-color': darken($color-white, 6),
  'button-size': 3rem,
  'button-size-big': 4rem,
  'margin-left': .4rem,
  'margin-top': .9rem
);





/// ----------------------------------------------------------------------------
/// Base
/// ----------------------------------------------------------------------------

.social-share {



  // Implementation detail

  &.in-article-footer {
    text-align: right;
    width: 50%;

    .no-flexbox & {
      float: right;
    }
  }
}

.social-share--centered {
  float: none;
}

.social-share__list {
  list-style: none;
  text-align: center;

  li {
    display: inline-block;
    margin: 0 .5rem;
  }
}





/// ----------------------------------------------------------------------------
/// Elements
/// ----------------------------------------------------------------------------

// Each action item; it wraps the control and menu, and should be a `div`
.social-share__item {
  display: inline-block;
  position: relative;
}

// A `button` element that expects an SVG icon to be inside of it
.social-share__control {
  background-color: get($social-share, "background-color");
  border: 0;
  border-radius: 100%;
  color: $darkgray;
  cursor: pointer;
  display: inline-block;
  height: get($social-share, "button-size");
  line-height: 1;
  outline: 0;
  padding: 0;
  position: relative;
  transition: background-color $animation-speed linear;
  width: get($social-share, "button-size");

  &:hover,
  &:active,
  &:focus {
    background-color: darken(get($social-share, "background-color"), 3);
  }

  &--big {
    height: get($social-share, "button-size-big");
    width: get($social-share, "button-size-big");
  }

  .svg-icon {
    vertical-align: middle;
  }
}

// The menu that holds each control's options; it wraps the menu-inner and
// menu-arrow, and should be a `div`. It has the stateful class `is-open`
// which is added by JavaScript and positions the menu.
.social-share__menu {
  overflow: hidden;
  padding: 1.5rem;
  pointer-events: auto;
  position: relative;
  z-index: z("middle");

  &.is-open {
    position: absolute;

    @media (max-width: $max-840) {
      right: 3.5rem;
      top: -3.6rem;
    }

    @media (min-width: $min-840) {
      left: (-10rem + 1.2rem);
    }
  }
}

.social-share__menu--top {
  top: -10.4rem;
}

// An inner wrapper for the menu items; it should be a `div` and it expects a
// `ul` of items to be inside of it. The social-share__control is also
// reposed and used for each menu item.
.social-share__menu__inner {
  background-color: $color-white;
  border-radius: .4rem;
  box-shadow: .1rem 0 .2rem rgba($color-black, .25), 0 0 .1rem rgba($color-black, .35);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: .8rem 0;
  position: relative;

  @media (min-width: $min-840) {
    box-shadow: 0 .1rem .2rem rgba($color-black, .25), 0 0 .1rem rgba($color-black, .35);
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .social-share__control {
    background-color: $color-white;
    border-radius: 0;
    color: $color-text;
    display: block;
    font-size: 1.3rem;
    height: auto;
    line-height: 1.4;
    margin: 0;
    padding: .4rem 1.5rem;
    text-align: left;
    white-space: nowrap;
    width: 100%;

    &:hover,
    &:active,
    &:focus {
      background-color: $color-white;
    }

    .svg-icon {
      margin-right: 1rem;
      top: -.2rem;
    }
  }
}

// An empty `div` to create the menu's arrow; contains a pseudo element
.social-share__menu__arrow {
  clip-path: rect(-.4rem 1.4rem 1.8rem -.4rem);
  display: inline-block;
  margin-top: -.7rem;
  position: absolute;

  @media (max-width: $max-840) {
    right: .1rem;
    top: 50%;
  }

  @media (min-width: $min-840) {
    clip-path: rect(0 1.8rem 1.4rem -.4rem);
    left: 50%;
    margin-left: -.7rem;
    margin-top: 0;
  }

  .social-share__menu--top & {
    bottom: 0;
  }

  .social-share__menu--bottom & {
    @media (min-width: $min-840) {
      top: .1rem;
    }
  }

  &::after {
    background-color: $color-white;
    content: "";
    display: block;
    height: 1.4rem;
    width: 1.4rem;

    .social-share__menu--top & {
      box-shadow: -.1rem .1rem .1rem -.1rem rgba($color-black, .84);
      transform: rotate(-135deg) translate(.6rem, -.6rem);

      @media (min-width: $min-840) {
        box-shadow: -.1rem -.1rem .1rem -.1rem rgba($color-black, .84);
        transform: rotate(-135deg) translate(.6rem, .6rem);
      }
    }

    .social-share__menu--bottom & {
      box-shadow: -.1rem .1rem .1rem -.1rem rgba($color-black, .84);
      transform: rotate(-135deg) translate(.6rem, -.6rem);

      @media (min-width: $min-840) {
        box-shadow: -.1rem -.1rem .1rem -.1rem rgba($color-black, .44);
        transform: rotate(45deg) translate(.6rem, .6rem);
      }
    }
  }
}