/*
 * Global styling för Rimners driftinformation. Klassnamnen är globala (importeras
 * med ?raw) så att webbplatsen kan skriva över variablerna nedan vid behov.
 */
.rimners-driftinfo {
  --rimners-driftinfo-gap: 0.125rem;
  --rimners-driftinfo-padding-block: 1rem;
  --rimners-driftinfo-padding-inline: clamp(1rem, 3vw, 2rem);
  --rimners-driftinfo-content-width: 90rem;
  --rimners-driftinfo-dismiss-size: 2.75rem;
  --rimners-driftinfo-border-radius: 0.25rem;
  --rimners-driftinfo-red-background: #b3261e;
  --rimners-driftinfo-red-text: #ffffff;
  --rimners-driftinfo-red-hover: rgba(255, 255, 255, 0.15);
  --rimners-driftinfo-yellow-background: #ffd23f;
  --rimners-driftinfo-yellow-text: #1a1a1a;
  --rimners-driftinfo-yellow-hover: rgba(0, 0, 0, 0.08);

  display: grid;
  gap: var(--rimners-driftinfo-gap);
  width: 100%;
}

.rimners-driftinfo__message {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: var(--rimners-driftinfo-padding-block) var(--rimners-driftinfo-padding-inline);
}

/* Bakgrunderna är fasta oavsett tema, så textfärgerna är också fasta. */
.rimners-driftinfo__message--red {
  --rimners-driftinfo-hover: var(--rimners-driftinfo-red-hover);

  background-color: var(--rimners-driftinfo-red-background);
  color: var(--rimners-driftinfo-red-text);
}

.rimners-driftinfo__message--yellow {
  --rimners-driftinfo-hover: var(--rimners-driftinfo-yellow-hover);

  background-color: var(--rimners-driftinfo-yellow-background);
  color: var(--rimners-driftinfo-yellow-text);
}

.rimners-driftinfo__content {
  margin-inline: auto;
  max-width: var(--rimners-driftinfo-content-width);
  width: 100%;
}

.rimners-driftinfo__type,
.rimners-driftinfo__heading,
.rimners-driftinfo__body,
.rimners-driftinfo__time {
  color: inherit;
  margin: 0;
}

.rimners-driftinfo__type {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rimners-driftinfo__heading {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.125rem;
}

.rimners-driftinfo__body {
  line-height: 1.5;
  margin-top: 0.25rem;
}

.rimners-driftinfo__time {
  font-weight: 700;
  margin: 0.5rem 0 0;
}

.rimners-driftinfo__link {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.rimners-driftinfo__link:hover {
  text-decoration-thickness: 0.15em;
}

.rimners-driftinfo__dismiss {
  align-items: center;
  background: transparent;
  border: 0.125rem solid currentColor;
  border-radius: var(--rimners-driftinfo-border-radius);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 var(--rimners-driftinfo-dismiss-size);
  font-size: 2rem;
  height: var(--rimners-driftinfo-dismiss-size);
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: var(--rimners-driftinfo-dismiss-size);
}

.rimners-driftinfo__dismiss:hover {
  background-color: var(--rimners-driftinfo-hover);
}

.rimners-driftinfo__link:focus-visible,
.rimners-driftinfo__dismiss:focus-visible {
  outline: 0.1875rem solid currentColor;
  outline-offset: 0.1875rem;
}

@media (max-width: 40rem) {
  .rimners-driftinfo__message {
    gap: 0.5rem;
  }

  .rimners-driftinfo__heading {
    font-size: 1.25rem;
  }
}