#cookiesjsr {
  --default-margin: var(--grid-gutter);
  --layer-body-bg-color: var(--color-bg-slight-contrast);

  --layer-header-height: 3.5em;
  --layer-header-bg-color: var(--color-bg-slight-contrast);
  --layer-header-font-color: var(--color-text);

  --layer-font-light: var(--color-text);
  --layer-font-dark:  var(--color-text);
  --layer-footer-bg-color: var(--color-bg-slight-contrast);
  --layer-footer-font-color:  var(--color-text);
  // --layer-footer-height: 4.5em;
  // Unused. --layer-bg-dark:  var(--color-bg-dark);

  --layer-tab-active-bg-color: var(--color-bg-light);
  --layer-tab-active-font-color: var(--color-text);

  --layer-tab-font-color: var(--color-text);
  --layer-border-color: transparent;
  --layer-tab-bg-color: var(--color-bg-slight-contrast);

  --btn-prime-inv-font-color: var(--color-text-inverted);
  --btn-prime-inv-bg-color: var(--color-link);
  --btn-prime-inv-border-color: var(--color-link);

  --btn-prime-font-color:  var(--color-interaction);
  --btn-prime-border-color: var(--color-interaction);
  --btn-prime-bg-color: var(--color-text-inverted);

  --btn-inv-border-color: var(--color-interaction);
  --btn-inv-font-color: var(--color-interaction);
  --btn-inv-bg-color: var(--color-text-inverted);

  --switch-border-color: var(--color-text);
  --switch-handle-color: var(--color-text-inverted);
  --switch-bg-off: var(--color-text-muted);
  --switch-width: 2.82rem;
  --switch-height: 1.25rem;
  --switch-always-on-bg-color: var(--color-text-inverted);

  --link-list-font-color: var(--color-text);
  --link-list-separator-color: var(--color-text-inverted);

  // Banner
  --banner-bg-color: var(--color-bg-slight-contrast);
  --banner-font-color: var(--color-text);
  //--banner-logo-offset: 100px; // max-height: calc(100vh - --banner-logo-offset);

  --btn-font-color: var(--color-text-inverted);
  --btn-bg-color: var(--color-link);
  --btn-border-color: var(--color-link);

  --switch-always-on-font-color: var(--color-success);
  --switch-bg-on: var(--color-success);
}

// Links under Text.
.cookiesjsr-links.links--row li a {
  text-decoration: underline;

  &:focus,
  &:hover {
    color: var(--color-text-inverted);
  }

  &:active {
    color: var(--color-interaction);
  }
}

// Settings overlay.
.cookiesjsr-layer {

  .cookiesjsr-layer--close {
    @include icon(xmark);
    background: none;
    color: var(--color-text);
    height: 2rem;
    margin: 0;
    text-indent: 0;
    width: 2rem;

    &:before {
      font-size: var(--font-size-icon);
      line-height: 2rem;
    }
  }

  .cookiesjsr-service-group--tab {
    // Override Button default.
    border-radius: 0;

    &:active {
      border: 1px dashed var(--color-text-inverted);
      outline: none;
    }

    // Add chevrons ▼ in mobile and add spacing.
    @include icon(chevron-down);
    &:before,
    &[aria-selected="true"]:before{
      display: none;
    }
    // Pixel defined: @see libraries/cookiesjsr/styles/_vars.scss
    @media screen and (max-width: 767px ) {
      line-height: 1.6;
      background: var(--color-bg-light);

      &:before {
        display: block;
        float: right;
        font-size: var(--font-size-icon);
        transition: transform 300ms ease;
        @media (prefers-reduced-motion: reduce) {
          transition-duration: 10ms;
        }
      }
    }
  }

  // Add a little space in mobile.
  .cookiesjsr-service-group {
    // Pixel defined: @see libraries/cookiesjsr/styles/_vars.scss
    @media screen and (max-width: 767px ) {
      margin: 0 1.25rem 1.25rem;
    }
  }

  .cookiesjsr-btn {
    @extend %button;
  }

  // "Primary-button"
  .cookiesjsr-btn.important.invert {
    &focus,
    &:hover {
      background: var(--color-interaction);
      color: var(--color-text-inverted);
      border-color: var(--color-interaction)
    }
    &:active {
      color: var(--color-text-inverted);
      background: var(--color-interaction);
    }
  }
}

// Banner.
.cookiesjsr-banner {

  &.active {
    padding: var(--grid-gutter);
  }

  .cookiesjsr-banner--info {
    padding-top: var(--grid-gutter);
  }

  .links--row {
    padding-bottom: .25rem; // Keep some space for active-outline.
  }
}

// In Video-placeholder,when cookies off.
.cookies-fallback {
  border-color: var(--color-divider-light);
  padding: 1.25rem 2.5rem;

  .cookies-fallback--btn {
  @extend %button;
  padding: .5em 2em;
  text-transform: unset;
  min-height: unset;
  }
  .cookies-fallback--link {
    @extend %button;
    font-size: unset;
    padding: .5em 2em;
    &:focus,
    &:hover {
      color: var(--color-text-inverted);
      background: var(--color-interaction);
      text-decoration: none;
    }

    &:active {
      color: var(--color-interaction);
      background: transparent;
      text-decoration: none;
    }
  }
}

.cookies-fallback--wrap {
  width: 100%;
  aspect-ratio: 16/9;
}

// @todo check back with https://www.drupal.org/project/cookies/issues/3350253
.cookies-fallback--video {
  background-image: none;
  background-color: var(--color-bg-slight-contrast);
}

