@use '../../theme';
@use '../../mixins';

.Social {
  text-align: center;

  &-webringArrow, &-webringLink {
    color: inherit;
  }

  &-webringArrow {
    text-decoration: none;

    @media (prefers-reduced-motion: no-preference) {
      transition: letter-spacing 200ms;

      &:hover, &:focus {
        text-decoration: none;
        letter-spacing: theme.$letterSpacing * 4;
      }
    }
  }

  hr {
    margin-block-start: theme.$spacer-s;
    margin-block-end: theme.$spacer-s;
  }

  &-badge {
    display: inline-block;
  }
}

@include mixins.rainbowify-text('.Social-webring', color);
