/**
 * @file
 * Social menu styling.
 */

/* Adding theme specific background colors for demo purposes. */

:where([data-theme="dgsom"]) {
  --site-secondary-bg-color: var(--midnight-joshua-tree);
}

:where([data-theme="labs-dynamic"]) {
  --site-secondary-bg-color: var(--midnight-joshua-tree);
}

.menu-social {
  align-items: center;
  display: flex;
  gap: var(--size-5);
  -webkit-margin-after: var(--size-4);
  margin-block-end: var(--size-4);
}

/* Adds background color in Patternlab only. */

.pl-demo .menu-social {
  background-color: var(--ucla-blue);
  background-color: var(--site-secondary-bg-color, var(--ucla-blue));
}

.menu-social .menu__item {
  -webkit-margin-after: var(--size-2);
  margin-block-end: var(--size-2);
  -webkit-margin-before: var(--size-1);
  margin-block-start: var(--size-1);
}

.menu-social .menu__link {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  align-items: center;
  background-color: transparent;
  background-image: none;
  color: var(--white);
  display: flex;
  font-size: var(--font-size-7);
  justify-content: center;
}

.menu-social .menu__link:focus {
  box-shadow: 0 0 var(--white), 0 0 0 2px var(--white), 0 0 var(--white);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.menu-social .menu__link svg {
  height: 1em;
  width: 1em;
}