:root {
  --cookie-consent-spacing-medium: 1rem;
  --cookie-consent-spacing-small: calc(
    var(--cookie-consent-spacing-medium) / 2
  );
  --cookie-consent-color-primary: #008ad7;
  --cookie-consent-color-secondary: white;
}

.cookie-consent {
  display: flex;
  flex-direction: column;
  row-gap: var(--cookie-consent-spacing-small);
  margin: var(--cookie-consent-spacing-medium);
  padding: var(--cookie-consent-spacing-medium);
  background: inherit;
  color: inherit;
  border-radius: 10px;
  box-shadow: 0 5px 20px;

  /* Ensure nothing overflows on page or flex + fixed position does not work:  */
  position: fixed;
  bottom: 0;
  left: 0;
}

.cookie-consent__buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  text-align: center;
  gap: var(--cookie-consent-spacing-small) var(--cookie-consent-spacing-medium);
}

.cookie-consent__button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-consent__button--ok {
  background: var(--cookie-consent-color-primary);
  color: var(--cookie-consent-color-secondary);

  /* Horizontal (left/right) */
  padding-inline: var(--cookie-consent-spacing-medium);

  /* Vertical (top/bottom) */
  padding-block: var(--cookie-consent-spacing-small);
}

.cookie-consent__button--more > a {
  color: var(--cookie-consent-color-primary);
}