.cookie-consent {
  position: fixed;
  inset: 0;
  margin: auto;
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 24px;
  background: var(--background-grey);
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 5px;
}

.cookie-consent:not([open]),
#cookie-settings[hidden] {
  display: none;
}

.cookie-consent::backdrop {
  background: rgb(17 34 72 / 70%);
}

.cookie-consent p {
  margin: 0 0 20px;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#cookie-decline {
  background: var(--blue);
}

#cookie-decline:hover {
  background: var(--orange-hover);
}

#cookie-settings {
  display: inline-block;
  width: auto;
  margin-inline-start: 50px;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
}

#cookie-settings:hover {
  color: var(--orange);
}

@media (max-width: 49.9375em) {
  #cookie-settings {
    margin-inline-start: 20px;
  }
}

.cookie-consent button:focus-visible,
#cookie-settings:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 30em) {
  .cookie-consent {
    padding: 20px;
  }

  .cookie-consent-actions button {
    flex: 1 1 auto;
  }
}