@import "settings.colors";
@import "settings.vars";

@import "mixins/tools.mixins";

.c-share-tools {
  border-top: 1px solid $color-stone-200;
  border-bottom: 1px solid $color-stone-200;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.c-share-tool {
  flex-basis: rem($c-share-tools-height);
  height: rem($c-share-tools-height);
  position: relative;
}

.c-share-tool__link {
  width: rem($c-share-tools-height);
  height: rem($c-share-tools-height);
  padding: rem(13);
  margin: 0 auto;
  text-decoration: none;
  display: block;

  &:hover,
  &:focus {
    background-color: $color-grey-50;
    text-decoration: none;
  }
}

.c-share-tool__link--email {
  padding: rem(11.5);
}

.c-share-tool__icon {
  width: rem(18);
  height: rem(18);
  fill: $color-grey-300;
  display: block;
}

.c-share-tool__icon--email {
  width: rem(21);
  height: rem(21);
}

.c-share-tools--dark {
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid $color-grey-100;
  border-bottom: 1px solid $color-grey-100;
  background-color: $c-share-tools-bg-color;

  .c-share-tool {
    width: 100%;
    flex-basis: auto;

    // no dividers for light version
    &::after {
      content: "";
      width: 1px;
      height: 65%;
      background-color: $color-white;
      display: block;
      position: absolute;
      left: rem(-0.5); // width / 2
      top: 17.5%; // (100% - height) / 2
    }

    &:first-child::after {
      display: none;
    }
  }

  .c-share-tool__link {
    &:hover,
    &:focus {
      background-color: $color-grey-660;
    }
  }

  .c-share-tool__icon {
    fill: $color-grey-50;
  }
}

