.cookiesjsr-btn {
  appearance: none;
  border-radius: var(--border-radius);
  border: var(--border-size) solid transparent;
  line-height: var(--input-button-lh);
  padding-block: var(--input-button-padding-y);
  padding-inline: 1.5em;
  text-align: center;
  text-decoration: none;
}

.cookiesjsr-btn:not(.important) {
  border-color: currentColor;
}

.cookiesjsr-btn.important {
  background: var(--c-a);
  border-color: transparent;
  color: var(--c-typo-on-a);
}

@media (width < 32em) {
  .cookiesjsr-btn {
    padding-inline: 0.75em;
  }
}

.cookiesjsr-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 0.75em;
}

@media (width >= 36em) {
  .cookiesjsr-links.links--row {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
  }
}

.cookiesjsr-links.links--row li a {
  line-height: 2em;
}

.cookiesjsr-switch {
  background-color: var(--switch-bg-off);
  border: 0;
  border-radius: var(--switch-height);
  border: 0.0625em solid var(--switch-border-color);
  cursor: pointer;
  display: block;
  block-size: var(--switch-height);
  margin: 0;
  padding: 0;
  position: relative;
  transition: background-color 0.1s ease-in-out;
  inline-size: var(--switch-width);
}

.cookiesjsr-switch::after {
  background-color: var(--switch-handle-color);
  border: 0.0625em solid var(--switch-border-color);
  border-radius: var(--switch-height);
  content: "";
  display: block;
  block-size: var(--switch-height);
  inset-inline-start: 0;
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%) scale(1.2);
  transition: inset-inline-start 0.1s ease-in-out;
  inline-size: var(--switch-height);
}

.cookiesjsr-switch:focus-within::after {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.cookiesjsr-switch.active {
  background-color: var(--switch-bg-on);

  @media (forced-colors) {
    background-color: CanvasText;
  }
}

.cookiesjsr-switch.active::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.cookiesjsr-switch input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

/* +banner */

.cookiesjsr-banner {
  background-color: var(--banner-bg-color);
  inset-block-end: 0;
  color: var(--banner-font-color);
  display: flex;
  flex-direction: column;
  block-size: auto;
  justify-content: flex-start;
  inset-inline-start: 0;
  gap: var(--size-l);
  max-block-size: 100vh;
  max-block-size: 100dvh;
  overflow: auto;
  padding: var(--component-spacing-x);
  position: fixed;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  inline-size: 100%;
  z-index: 10000;
}

.cookiesjsr-banner.active {
  transform: translateY(0);
}

@media (width < 40em) {
  .cookiesjsr-banner--action {
    flex-direction: column;
  }
}

@media (width >= 40em) {
  .cookiesjsr-banner--info,
  .cookiesjsr-banner--action {
    inline-size: min(100%, var(--container-max-inline-size));
    margin-inline: auto;
  }
}

.cookiesjsr-banner a {
  color: var(--link-list-font-color);
}

.cookiesjsr-banner--text {
  display: block;
}

.cookiesjsr-banner--links {
  font-size: 0.85em;
  margin-block-start: 0.5em;
}

.cookiesjsr-banner--action {
  display: flex;
  gap: var(--size-s);
  white-space: nowrap;
}

/* +layer */

.cookiesjsr-service-groups {
  display: block;
  list-style: none;
  margin: 0 !important;
  margin-block-end: -0.0625em !important;
  max-block-size: 100%;
  overflow: auto;
  padding: 0 !important;
  position: static !important;
}

.cookiesjsr-service-group {
  line-height: 1.5em;
  list-style: none;
  position: static !important;
}

.cookiesjsr-service-group--tab {
  background: var(--layer-tab-bg-color);
  cursor: pointer;
  display: block;
  font-weight: 700;
  margin: 0;
  min-block-size: 3em;
  padding-block: 1em;
  padding-inline: var(--default-margin);
  text-align: start;
  text-decoration: none;
  inline-size: 100%;
}

@media (width < 48em) {
  .cookiesjsr-service-group:not(:last-child) {
    border-block-end: 0.0625rem solid transparent;
  }
}

@media (width > 48em) {
  .cookiesjsr-service-group--tab[aria-selected="true"] {
    border: 0.0625rem solid transparent;
    border-inline-start: none;
  }

  .cookiesjsr-service-group:first-child
    .cookiesjsr-service-group--tab[aria-selected="true"] {
    border-block-start: none;
  }
}

.cookiesjsr-service-group--tab:focus-visible {
  outline-offset: -0.0625rem;
}

@media (width >= 48em) {
  .cookiesjsr-service-group--tab {
    padding-block: 1em;
    padding-inline: 3.25em 1.25em;
    inline-size: 30%;
  }
}

.cookiesjsr-service-group--content {
  display: none;
}

@media (width >= 48em) {
  .cookiesjsr-service-group--content {
    block-size: 100%;
    overflow: auto;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    inline-size: 70%;
  }
}

.cookiesjsr-service-group--intro {
  padding-block: 1em;
  padding-inline: var(--default-margin);
}

.cookiesjsr-service-group.active .cookiesjsr-service-group--tab {
  background: var(--layer-tab-active-bg-color);
  color: var(--layer-tab-active-font-color);
}

.cookiesjsr-service-group.active .cookiesjsr-service-group--content {
  background: var(--layer-tab-active-bg-color);
  color: var(--layer-tab-active-font-color);
  display: block;
  font-weight: 500;
}

.cookiesjsr-service-group--services {
  margin: 0 !important;
  padding: 0 !important;
}

.cookiesjsr-service {
  align-items: center;
  background-color: hsla(210, 4%, 90%, 0);
  display: flex;
  transition: background-color 0.3s ease;
}

.cookiesjsr-service:hover {
  background-color: hsla(210, 4%, 90%, 0.1);
}

.cookiesjsr-service--description {
  padding-block: 0.625em;
  padding-inline: 1.25em;
  inline-size: calc(100% - 2.5em - 2.8125em);
}

.cookiesjsr-service--description h3 {
  color: var(--layer-font-light);
  font-size: 1.125em;
  font-weight: 400;
  margin: 0;
}

.cookiesjsr-service--links a {
  font-size: 0.75em;
}

.cookiesjsr-service--links a,
.cookiesjsr-service--links a:active,
.cookiesjsr-service--links a:hover,
.cookiesjsr-service--links a:visited {
  color: var(--layer-font-light);
}

.cookiesjsr-service--action {
  padding-block: 0.625em;
  padding-inline: 1.25em;
  inline-size: calc(2.5em + 2.8125em);
}

.cookiesjsr-service--always-on {
  color: var(--switch-always-on-font-color);
  display: flex;
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
}

.cookiesjsr-service--always-on span {
  background-color: var(--switch-always-on-bg-color);
  padding-block: 0;
  padding-inline: 0.5em;
}

.cookiesjsr-layer {
  background: var(--layer-header-bg-color);
  border: 0.0625rem solid transparent;
  display: block;
  block-size: 100vh;
  inset-inline-start: 50%;
  line-height: 1.5em;
  max-inline-size: 100%;
  overflow: hidden;
  padding-block: var(--layer-header-height) var(--layer-footer-height);
  padding-inline: 0;
  position: fixed;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 100vw;
  z-index: 314160;
}

@media (height >= 41.75em) {
  .cookiesjsr-layer {
    block-size: 80vh;
    max-block-size: 35.9375em;
  }
}

@media (height >= 62em) {
  .cookiesjsr-layer {
    block-size: 60vh;
  }
}

@media (width >= 48em) {
  .cookiesjsr-layer {
    inline-size: 53.75em;
  }
}

.cookiesjsr-layer--overlay {
  background: rgb(0 0 0 / 0.5);
  block-size: 100vh;
  inset-inline-start: 0;
  position: fixed;
  inset-block-start: 0;
  inline-size: 100vw;
  z-index: 314159;
}

.cookiesjsr-layer--header {
  align-items: center;
  background: var(--layer-header-bg-color);
  border-block-end: 0.0625em solid var(--color-grey-300);
  display: flex;
  block-size: 3.5em;
  justify-content: space-between;
  inset-inline-start: 0;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--default-margin);
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  z-index: 100;
}

.cookiesjsr-layer--close {
  position: relative;
  border: 0;
  cursor: pointer;
  block-size: 2em;
  padding: 0;
  text-indent: -999em;
  inline-size: 2em;
  z-index: 102;
}

.cookiesjsr-layer--close::before,
.cookiesjsr-layer--close::after {
  content: "";
  display: block;
  block-size: 0;
  border: 0.0625em solid;
  inline-size: 50%;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
}

.cookiesjsr-layer--close::before {
  rotate: -45deg;
}

.cookiesjsr-layer--close::after {
  rotate: 45deg;
}

.cookiesjsr-layer--body {
  background: var(--layer-body-bg-color);
  inset-block-end: var(--layer-footer-height);
  inset-inline-start: 0;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: var(--layer-header-height);
}

.cookiesjsr-layer--footer {
  align-items: center;
  background: var(--layer-footer-bg-color);
  border-block-start: 0.0625em solid var(--layer-border-color);
  inset-block-end: 0;
  display: flex;
  block-size: var(--layer-footer-height);
  justify-content: flex-end;
  inset-inline-start: 0;
  padding-block: 0;
  padding-inline: var(--component-spacing-x);
  position: absolute;
  inline-size: 100%;
}

@media (width >= 48em) {
  .cookiesjsr-layer--footer {
    justify-content: space-between;
  }
}

.cookiesjsr-layer--label-all {
  display: none;
}

@media (width >= 48em) {
  .cookiesjsr-layer--label-all {
    display: block;
    padding-right: var(--default-margin);
    inline-size: 30%;
  }
}

.cookiesjsr-layer--actions {
  align-items: center;
  display: flex;
  gap: var(--size-s);
  margin: -0.625em;
}

@media (width < 48em) {
  .cookiesjsr-layer--actions {
    inline-size: calc(100% + 1.25em);
  }
}

@media (width >= 36em) {
  .cookiesjsr-layer button.save {
    margin-inline-start: auto;
    inline-size: auto;
  }
}

#cookiesjsr {
  --default-margin: 1.25em;
  --link-list-font-color: currentColor;
  --link-list-separator-color: currentColor;
  --banner-bg-color: var(--c-decoration-bg-dark);
  --banner-font-color: var(--c-typo-primary-on-dark);
  --layer-header-height: 3.5em;
  --layer-header-bg-color: var(--c-decoration-bg);
  --layer-body-bg-color: var(--c-decoration-bg);
  --layer-tab-bg-color: var(--c-decoration-bg);
  --layer-tab-active-bg-color: var(--c-decoration-bg-light);
  --layer-tab-active-font-color: currentColor;
  --layer-bg-dark: var(--c-decoration-bg-light);
  --layer-font-light: currentColor;
  --layer-border-color: var(--color-grey-300);
  --layer-footer-bg-color: var(--c-decoration-bg);
  --layer-footer-height: 4.5em;
  --switch-border-color: var(--color-grey-500);
  --switch-handle-color: var(--c-decoration-bg);
  --switch-bg-off: var(--c-decoration-bg);
  --switch-bg-on: var(--c-c);
  --switch-width: 2.8125em;
  --switch-height: 1.25em;
  --switch-always-on-font-color: var(--c-c);
  --switch-always-on-bg-color: var(--c-decoration-bg);
}