/**
 * @file
 * Icon styles.
 */

.icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.icon .material-icons,
.icon .material-symbols-outlined {
  aspect-ratio: var(--ratio-box);
  border-color: var(--ucla-blue);
  color: var(--ucla-blue);
  display: grid;
  font-size: var(--font-size-10);
  inline-size: 96px;
  align-content: center;
  justify-content: center;
  place-content: center;
}

/* For Patternlab demo purposes only. */

.pl-demo .icon {
  padding-block: var(--size-15);
}

.icon__link {
  border-bottom: 2px solid transparent;
  color: var(--ucla-blue);
  font-family: var(--font-heading);
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-500);
  text-align: center;
}

.icon__link:hover {
  border-bottom: 2px solid var(--silver-lake-reservoir);
  color: var(--silver-lake-reservoir);
}

.icon__link:focus {
  box-shadow: 0 0 var(--white), 0 0 0 2px var(--ucla-blue), 0 0 var(--white);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* When Venice Canal background color is present, the icon's link and underline
  color changes to white. */

.bg-venice-canal.layout--onecol .icon__link {
  color: var(--white);
}

.bg-venice-canal.layout--onecol .icon__link:hover {
  border-bottom-color: var(--white);
}

/* When Santa Barbara Sand background color is present, the icon's link
  and underline color changes to white. */

.bg-santa-barbara-sand.layout--onecol .icon__link {
  color: var(--midnight-observatory);
}

.bg-santa-barbara-sand.layout--onecol .icon__link:hover {
  border-bottom-color: var(--midnight-observatory);
}

.icon__teaser {
  font-size: var(--font-size-2);
  -webkit-margin-before: var(--size-3);
  margin-block-start: var(--size-3);
  max-inline-size: 30ch;
  text-align: center;
}

/* When Venice Canal background color is present, the teaser text color
  changes to white. */

.bg-venice-canal.layout--onecol .icon__teaser {
  color: var(--white);
}

/* When Santa Barbara Sand background color is present, the teaser text color
  changes to white. */

.bg-santa-barbara-sand.layout--onecol .icon__teaser {
  color: var(--midnight-observatory);
}

/* Material Icon Colors */

[class*="radius-"] .material-icons,
[class*="radius-"] .material-symbols-outlined {
  border-width: var(--border-size-3);
}

.border-ucla-blue .material-icons,
.border-ucla-blue .material-symbols-outlined {
  border-color: var(--ucla-blue);
  color: var(--ucla-blue);
}

.border-midnight-joshua-tree .material-icons,
.border-midnight-joshua-tree .material-symbols-outlined {
  border-color: var(--midnight-joshua-tree);
  color: var(--midnight-joshua-tree);
}

.border-silver-lake-reservoir .material-icons,
.border-silver-lake-reservoir .material-symbols-outlined {
  border-color: var(--silver-lake-reservoir);
  color: var(--silver-lake-reservoir);
}

.border-southbay-waves .material-icons,
.border-southbay-waves .material-symbols-outlined {
  border-color: var(--southbay-waves);
  color: var(--southbay-waves);
}

.border-venice-canal .material-icons,
.border-venice-canal .material-symbols-outlined {
  border-color: var(--venice-canal);
  color: var(--venice-canal);
}

.border-midnight-observatory .material-icons,
.border-midnight-observatory .material-symbols-outlined {
  border-color: var(--midnight-observatory);
  color: var(--midnight-observatory);
}

.border-malibu-dolphin .material-icons,
.border-malibu-dolphin .material-symbols-outlined {
  border-color: var(--malibu-dolphin);
  color: var(--malibu-dolphin);
}

.radius-square .material-icons,
.radius-square .material-symbols-outlined {
  border-radius: var(--border-size-3);
}

.radius-round .material-icons,
.radius-round .material-symbols-outlined {
  border-radius: var(--radius-round);
}

/* All the color variations above are ignored and instead the border color
  and icon color changes to white when Venice Canal background color is present. */

.bg-venice-canal.layout--onecol .material-icons,
.bg-venice-canal.layout--onecol .material-symbols-outlined {
  border-color: var(--white);
  color: var(--white);
}

/* All the color variations above are ignored and instead the border color
  and icon color changes to `#00273D` when Santa Barbara Sand  background color
  is present. */

.bg-santa-barbara-sand.layout--onecol .material-icons,
.bg-santa-barbara-sand.layout--onecol .material-symbols-outlined {
  border-color: var(--midnight-observatory);
  color: var(--midnight-observatory);
}

.radius-round .material-symbols-outlined ~ .icon__link,
.radius-square .material-symbols-outlined ~ .icon__link {
  -webkit-margin-before: var(--size-4);
  margin-block-start: var(--size-4);
}