section[data-route='dc.show.license'] {
  @extend %license-route;
}
%license-route .validity {
  @extend %license-validity;
}
%license-route aside {
  @extend %license-route-learn-more;
}

%license-route h2 {
  @extend %h200;
}

%license-validity p {
  color: var(--token-color-foreground-faint);
}
%license-validity dl {
  @extend %horizontal-kv-list;
  font-size: var(--typo-size-400);
}
%license-validity dl .expired + dd {
  @extend %visually-hidden;
}
%license-validity dl dt::before {
  content: '';
  margin-right: 0.25rem; /* 4px */
}
%license-validity dl .expired::before {
  --icon-name: icon-x-circle;
  --icon-color: var(--token-color-foreground-critical);
}
%license-validity dl .warning::before {
  --icon-name: icon-alert-circle;
  --icon-color: var(--token-color-foreground-warning);
}
%license-validity dl .valid:not(.warning)::before {
  --icon-name: icon-check-circle;
  --icon-color: var(--token-color-foreground-success);
}

%license-route-learn-more {
  @extend %panel;
  box-shadow: none;
  padding: var(--padding-y) var(--padding-x);
  width: 40%;
  min-width: 413px;
  margin-top: 1rem; /* 16px */
}
%license-route-learn-more header > :first-child {
  @extend %h300;
}
%license-route-learn-more header {
  margin-bottom: 1rem; /* 16px */
}