/**
 * @file
 * E-learning sidebar. Buttons and type come from the theme
 * (.button, .button--filled, …); these rules lay out the parts.
 */

hws-elearning-sidebar {
  --hws-el-red: #d62631;
  --hws-el-green: #94c120;
  --hws-el-grey: #d9dcd8;
  display: block;
}

/* Progress ring: --value is 0–100. */
.hws-el-ring {
  --size: 1.25rem;
  background: conic-gradient(currentColor calc(var(--value) * 1%), rgba(127, 127, 127, 0.35) 0);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: var(--size);
  mask: radial-gradient(circle, transparent 45%, #000 46%);
  vertical-align: middle;
  width: var(--size);
}
.hws-el-ring--large {
  --size: 9rem;
  color: var(--hws-el-red);
}
.hws-el-ring--failed {
  color: var(--hws-el-red);
}
.hws-el-ring--done {
  color: var(--hws-el-green);
}

.hws-el-error {
  color: var(--hws-el-red);
}

/* ------------------------------------------------------------------ */
/* Sidebar (in the header overlay, light text on the dark background)  */
/* ------------------------------------------------------------------ */

hws-elearning-sidebar {
  --hws-el-rule: rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: 'Futura LT W01 Book', Arial, sans-serif;
  line-height: 1.4;
  overflow-y: auto;
  padding: 1.5rem 0.75rem 0 0;
}
hws-elearning-sidebar a:not(.button) {
  color: inherit;
  text-decoration: none;
}
hws-elearning-sidebar a:not(.button):hover,
hws-elearning-sidebar a:not(.button):focus {
  text-decoration: underline;
}
/* The theme's spinner (.ajax-progress), in place and white on the dark
   background. */
.hws-el-sidebar__loading {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
.hws-el-sidebar__loading .ajax-progress {
  position: relative;
}
.hws-el-sidebar__loading .ajax-progress::before {
  border-color: #fff;
}

/* Welcome: a large condensed heading over a rule. */
.hws-el-bar {
  border-bottom: 1px solid var(--hws-el-rule);
  color: #fff;
  font-family: 'Futura LT W02 Bold Condensed', Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  padding: 0 0 1rem;
  text-transform: uppercase;
}

/* Sections, separated by rules as the main site's lists. */
.hws-el-block {
  border-bottom: 1px solid var(--hws-el-rule);
  padding: 1.25rem 0;
}
.hws-el-block h3 {
  color: #fff;
  font-family: 'Futura LT W02 Bold Condensed', Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}
/* Spacing from the bottom margins only (the theme adds space above
   paragraphs). */
hws-elearning-sidebar .hws-el-block > *,
hws-elearning-sidebar .hws-el-block > h3 + p {
  margin-top: 0;
}
.hws-el-block > p {
  margin-bottom: 0.75rem;
  opacity: 0.85;
}
.hws-el-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.hws-el-list__item {
  align-items: center;
  border-top: 1px solid var(--hws-el-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.6rem 0;
}
/* A list that ends its section ends on the section's rule. */
hws-elearning-sidebar .hws-el-list:last-child {
  margin-bottom: 0;
}
.hws-el-list:not(:last-child) .hws-el-list__item:last-child {
  border-bottom: 1px solid var(--hws-el-rule);
}
.hws-el-list__item small {
  display: block;
  flex-basis: 100%;
  font-size: 0.8125rem;
  opacity: 0.75;
}
.hws-el-list__item--training {
  align-items: start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto 1fr;
}
.hws-el-list__item--training .hws-el-ring {
  margin-top: 0.1rem;
}

/* Notifications: a chevron to open them, a red dot for new ones. */
.hws-el-notification {
  display: block;
}
.hws-el-notification summary {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  list-style: none;
}
.hws-el-notification summary::-webkit-details-marker {
  display: none;
}
.hws-el-notification summary::after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: '';
  flex-shrink: 0;
  height: 0.45rem;
  margin: 0.3rem 0.2rem 0 auto;
  transform: rotate(45deg);
  transition: transform 150ms;
  width: 0.45rem;
}
.hws-el-notification details[open] summary::after {
  margin-top: 0.5rem;
  transform: rotate(-135deg);
}
.hws-el-notification__text {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  opacity: 0.85;
}
.hws-el-notification.is-new summary::before,
.hws-el-list__item.is-new:not(.hws-el-notification)::before {
  background: var(--hws-el-red);
  border-radius: 50%;
  content: '';
  flex-shrink: 0;
  height: 0.5rem;
  margin-top: 0.45rem;
  width: 0.5rem;
}

/* Forms (login, training code): white fields, the main site's buttons. */
.hws-el-login label,
.hws-el-code label {
  display: block;
  margin-bottom: 0.75rem;
}
.hws-el-login input[type='text'],
.hws-el-login input[type='password'],
.hws-el-code input[type='text'] {
  background: #fff;
  border: 0;
  border-radius: 0;
  color: #000;
  display: block;
  font-size: 1rem;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  width: 100%;
}
.hws-el-login__remember {
  align-items: center;
  display: flex !important;
  gap: 0.5rem;
}
.hws-el-login__remember input {
  accent-color: #fff;
  margin: 0;
}
.hws-el-code__message:empty {
  display: none;
}
.hws-el-code__message {
  font-size: 0.875rem;
  margin: 0.75rem 0 0;
}
.hws-el-sidebar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}
hws-elearning-sidebar .button + .button {
  margin-left: 0;
}