/*
 * TODO: better color names. some colors are repeated for ookla and speedtest,
 *       might  want to have a base colors less file and then have ookla and speedtest extend from that.
 */
.wp-block-ookla-social-share {
  --social-top: auto;
  --social-share-width: 48em;
  --social-icon-width: 2.4rem;
  --social-sidebar-gap: 1rem;
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding-left: var(--gap);
  padding-right: var(--gap);
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  top: var(--social-top, auto);
  /*
    @breakpoint-xl:  80em;  // 1280px
    1280 - 1380 = 100px
  */
}
@media screen and (min-width: 80em) {
  .wp-block-ookla-social-share {
    --gap: 0;
  }
}
@media screen and (min-width: 48em) {
  .wp-block-ookla-social-share {
    --social-share-width: var(--site-width);
  }
}
@media screen and (min-width: 1380px) {
  .wp-block-ookla-social-share {
    --gap: 0;
    --social-icon-width: 2.8rem;
    --social-sidebar-gap: 1.6rem;
  }
}
@media screen and (min-width: 90em) {
  .wp-block-ookla-social-share {
    --social-icon-width: 3.8rem;
    --social-sidebar-gap: 2.6rem;
  }
}
@media screen and (min-width: 48em) {
  .wp-block-ookla-social-share {
    max-width: var(--social-share-width);
  }
}
.wp-block-ookla-social-share .article-social-sidebar {
  margin-block: 1rem 0;
  padding: var(--social-sidebar-gap);
  background: var(--theme-bg);
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: var(--gap-sm);
  height: fit-content;
}
@media screen and (min-width: 48em) {
  .wp-block-ookla-social-share .article-social-sidebar {
    margin-block: 2rem 0;
  }
}
@media screen and (min-width: 64em) {
  .wp-block-ookla-social-share .article-social-sidebar {
    margin-block: 4.4rem 0;
  }
}
.wp-block-ookla-social-share .article-social-sidebar h4 {
  margin: 0;
  text-transform: uppercase;
}
.wp-block-ookla-social-share .article-social-sidebar a {
  display: block;
}
.wp-block-ookla-social-share .article-social-sidebar a .svg-icon {
  transition: all var(--transition-speed) ease;
  width: var(--social-icon-width);
  height: var(--social-icon-width);
}
.wp-block-ookla-social-share[data-social-share-clone='true'] .article-social-sidebar {
  margin-top: 3.2rem;
  margin-bottom: 4.2rem;
}
@media screen and (min-width: 1380px) {
  .wp-block-ookla-social-share {
    --social-top: calc(var(--masthead-height) + 2.6rem);
    margin: 0;
    width: 0;
    height: 0;
    position: sticky;
  }
  .wp-block-ookla-social-share .article-social-sidebar {
    width: calc(var(--social-icon-width) + (2 * var(--social-sidebar-gap)));
    flex-direction: column;
    margin-top: 2.6rem;
    margin-bottom: 2.6rem;
  }
  .wp-block-ookla-social-share[data-social-share-clone='true'] {
    display: none;
  }
}

/*# sourceMappingURL=style.css.map */