.trafford-social-links {
  --trafford-social-link-size: 3.75rem;
  --trafford-social-icon-size: 2.5rem;
  --trafford-social-link-gap: 1rem;
  --trafford-social-link-bg: var(--color-black);
  --trafford-social-link-fg: var(--color-accent);
  --trafford-social-link-hover-bg: var(--color-black);
  --trafford-social-link-hover-fg: var(--color-accent-2);
  margin: 0;
}

.trafford-social-links--compact {
  --trafford-social-link-size: 2.5rem;
  --trafford-social-icon-size: 1rem;
  --trafford-social-link-gap: 0.625rem;
}

.trafford-social-links__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--trafford-social-link-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trafford-social-links__item {
  position: relative;
  inline-size: var(--trafford-social-link-size);
  block-size: var(--trafford-social-link-size);
  display: block;
  margin: 0;
  padding: 0;
}

.trafford-social-links__link {
  inline-size: var(--trafford-social-link-size);
  block-size: var(--trafford-social-link-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--trafford-social-link-bg);
  color: var(--trafford-social-link-fg);
  text-decoration: none;
  line-height: 1;
  outline-offset: 0.1875rem;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.trafford-social-links__link:hover {
  background-color: var(--trafford-social-link-hover-bg);
  color: var(--trafford-social-link-hover-fg);
  text-decoration: none;
  box-shadow: var(--ti-tile-shadow-hover);
}

.trafford-social-links__link:focus-visible {
  outline: 0.125rem solid var(--color-accent);
  background-color: var(--trafford-social-link-hover-bg);
  color: var(--trafford-social-link-hover-fg);
  box-shadow: var(--ti-tile-shadow-hover);
}

.trafford-social-links__link:active {
  filter: var(--ti-active-filter);
}

.trafford-social-links a.trafford-social-links__link:focus,
.trafford-social-links a.trafford-social-links__link:focus-visible {
  outline: 0;
  background-color: var(--color-focus);
  color: var(--color-black);
  text-decoration: none;
  box-shadow: none;
  filter: none;
}

.trafford-social-links__icon {
  inline-size: var(--trafford-social-icon-size);
  block-size: var(--trafford-social-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trafford-social-links__icon svg {
  inline-size: 100%;
  block-size: 100%;
  fill: currentColor;
}

.social-media-subscription-panel__links .trafford-social-links__list {
  justify-content: flex-end;
}

.lgd-footer__post-footer .block-trafford-social-media-links {
  display: flex;
  justify-content: center;
}

.trafford-social-links__link--facebook .trafford-social-links__icon {
  width: 2.0625rem;
  height: 3.75rem;
  overflow: hidden;
}

.trafford-social-links__link--facebook svg {
  position: relative;
  inset-block-end: -.525rem;
}

@media (max-width: 48rem) {
  .trafford-social-links--footer {
    --trafford-social-link-size: 2.75rem;
    --trafford-social-icon-size: 2rem;
    --trafford-social-link-gap: 0.75rem;
  }

  .social-media-subscription-panel__links .trafford-social-links__list {
    justify-content: flex-start;
  }

  .trafford-social-links__link--facebook .trafford-social-links__icon {
    width: var(--trafford-social-icon-size);
    height: var(--trafford-social-icon-size);
    overflow: visible;
  }

  .trafford-social-links__link--facebook svg {
    inset-block-end: 0;
  }
}

.event-map-section__social,
.venue-info-section__social {
  .trafford-social-links__list {
    gap: unset;
  }

  .trafford-social-links__item {
    transform: scale(0.667);
  }
}