/**
 * @file
 * Cookie Notice Styles
 */

:root {
  --klaro-button-border-hover: 0;
  --klaro-button-text-color-hover: var(--color--white);
  --notice-bottom: 0;
  --notice-left: 0;
  --notice-max-width: 100%;
  --notice-right: 0;
}

.klaro {
  font-size: var(--font-size--caption);
}

.klaro .cookie-notice:not(.cookie-modal-notice) {
  background-color: var(--color--primary);
  border-radius: 0;
  box-shadow: none;
  color: var(--color--white);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  display: block;
  padding: var(--gap-static);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  justify-content: left;
  margin-top: var(--gap-static--xs);
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a, 
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
  display: block;
}

.cm-modal.cm-klaro:focus, 
.cm-modal.cm-klaro:focus-visible, 
.context-notice:focus, 
.context-notice:focus-visible, 
.cookie-notice:focus, 
.cookie-notice:focus-visible {
  /* outline: 0; TEMP REMOVAL */
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  appearance: none;
  background-color: unset;
  border: none;
  color: var(--color--white);
  display: inline-block;
  font-size: var(--font-size--h5);
  font-weight: 600;
  letter-spacing: var(--letter-spacing--h5);
  margin: 0;
  /* outline: 0; TEMP REMOVAL */
  padding: 0 0 8px 0;
  position: relative;
  transition: padding var(--transition-dur);

  &::after {
    background-color: var(--button-after--background-color, var(--color--dark-accent-2));
    bottom: 0;
    content:'';
    display: block;
    height: 2px;
    position: absolute;
    transition: height var(--transition-dur), background-color var(--transition-dur);
    width: 100%;
  }

  &:hover,
  &:active {
    background-color: unset;
    border: none;
    color: var(--color--white);

    &::after {
      background-color: var(--button-after--background-color--hover, var(--color--dark-accent-2));
      height: 4px;
    }
  }

  &:last-child {
    margin-left: var(--gap--xs);
  }
}

.klaro .cookie-modal p, 
.klaro .cookie-modal strong, 
.klaro .cookie-modal h1, 
.klaro .cookie-modal h2, 
.klaro .cookie-modal ul, 
.klaro .cookie-modal li, 
.klaro .context-notice p, 
.klaro .context-notice strong, 
.klaro .context-notice h1, 
.klaro .context-notice h2, 
.klaro .context-notice ul, 
.klaro .context-notice li, 
.klaro .cookie-notice p, 
.klaro .cookie-notice strong, 
.klaro .cookie-notice h1, 
.klaro .cookie-notice h2, 
.klaro .cookie-notice ul, 
.klaro .cookie-notice li {
  color: var(--color--white);
}

@media only screen and (min-width: 768px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    align-items: center;
    display: flex;
    padding: var(--gap-static) var(--container-padding--left);
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a, 
  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div {
    align-items: center;
    display: flex;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    flex-grow: 1;
    justify-content: right;
    margin-top: 0;
    padding-left: var(--container-padding--left);
  }
}