/**
 * @file
 * Date styles.
 */

.date {
  align-items: center;
  color: var(--gray-500);
  display: flex;
  font-size: var(--font-size-0);
}

/* Date text color variations. */

.date.date--light {
  color: var(--white);
}

.date.date--dark {
  color: var(--black);
}

.date.date--small {
  font-size: var(--font-size-sm);
}

.date svg {
  color: inherit;
  font-size: inherit;
  display: inline-block;
  height: 1em;
  -webkit-margin-end: var(--size-1);
  margin-inline-end: var(--size-1);
  vertical-align: -0.125em;
  width: 1em;
}

.date span {
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: var(--leading-tight);
  -webkit-margin-start: 0;
  margin-inline-start: 0;
}

/* Adds background color and padding for visibility purposes only. */

.pl-demo .date--light {
  background-color: var(--ucla-blue);
  padding: var(--size-4);
}