/*
 * Pre-upgrade:
 * - display:inline-block element
 * - size-defined element
 * - predefined default size
 */
bento-social-share {
  display: inline-block;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: 60px;
  height: 44px;
}

/* Pre-upgrade: size-defining element - hide children until build. */
bento-social-share:not(.i-amphtml-built)
  > :not([placeholder]):not([slot='i-amphtml-svc']) {
  display: none;
  content-visibility: hidden;
}

/**
  * Note: Attribute selectors were used initially here but we switched to using
  * class-based selector to style each type because of a bug on iOS Safari 8.
  * See https://github.com/ampproject/amphtml/issues/4277 for more details.
  */

bento-social-share:focus {
  outline: #0389ff solid 2px;
  outline-offset: 2px;
}

bento-social-share::part(button):focus {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Twitter Styling */
.bento-social-share-twitter {
  color: #fff;
  background-color: #1da1f2;
}

/* Facebook Styling */
.bento-social-share-facebook {
  color: #1877f2;
  background-color: #fff;
}

/* Pinterest Styling */
.bento-social-share-pinterest {
  color: #e60023;
  background-color: #fff;
}

/* LinkedIn Styling */
.bento-social-share-linkedin {
  color: #fff;
  background-color: #0a66c2;
}

/* Tumblr Styling */
.bento-social-share-tumblr {
  color: #fff;
  background-color: #001935;
}

/* Email Styling */
.bento-social-share-email {
  color: #fff;
  background-color: #000000;
}

/* Whatsapp Styling */
.bento-social-share-whatsapp {
  color: #fff;
  background-color: #25d366;
}

/* line Styling */
.bento-social-share-line {
  color: #fff;
  background-color: #00b900;
}

/* SMS Styling */
.bento-social-share-sms {
  color: #fff;
  background-color: #000000;
}

/* "system" styling */
.bento-social-share-system {
  color: #fff;
  background-color: #000000;
}
