//
// MISC STYLES
// ===============
// This is styles to be sorted into components
//

/** Labels */

.label {
 display: inline-flex;
 align-items: center;
 padding: 0.25em 0.75em;
 font-size: 1rem;
 font-weight: $font--weight--semibold;
 line-height: 1.4;
 color: $color--surface;
 text-align: center;
 white-space: nowrap;
 vertical-align: baseline;
 border-radius: $radius--pill;
 letter-spacing: 0.01em;
 font-variant-numeric: tabular-nums;
}

.normal {
 font-size: 100%;
}

.ok {
 background-color: $color--ok;
}
.warning {
 background-color: $color--warning;
}
.error {
 background-color: $color--error;
}

.info {
 background-color: $color--blue;
}

.label.warning {
 background-color: #facc15;
 color: #422006;
}

ul.menu {
 list-style: none;
 font-size: 125%;
 text-transform: uppercase;
}

.errors {
 margin-bottom: 1.5rem;
 background: $color--error-bg;
 border: 1px solid $color--error-border;
 border-radius: $radius--md;
 padding: 1rem 1.25rem;
 color: $color--text;

 b {
  color: $color--error;
  font-weight: $font--weight--semibold;
  display: block;
  margin-bottom: 0.5rem;
 }

 ul {
  margin-bottom: 0;
 }
}

.subtableheader {
 background: $color--surface;
 color: $color--text-secondary;
 font-weight: $font--weight--semibold;
}

// Secondary "from page" link in the assets table.
a.from-page {
 font-size: 0.85em;
 color: $color--text-muted;
 white-space: nowrap;

 &:hover {
  color: $color--blue;
 }
}

/* Large */

.large {
 font-size: 1.333rem;
 line-height: 1.8rem;
}

.hidden-small {
 display: inline;
}

.url {
 overflow-wrap: break-word;
 word-wrap: break-word;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
}