:root {
  --switch-width: 58px;
  --switch-height: calc(var(--switch-width) / 2);
  --switch-radius: var(--switch-height);
  --switch-label-bg: #ffffff;
  --switch-bg: #e2e2e2;
  --switch-bg-disabled: #cccccc;
  --switch-bg-success: #8bc34a;
}

.switch {
  position: relative;
  width: fit-content;
  height: var(--switch-height);
}

.switch input,
.switch-input {
  opacity: 0;
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--switch-width);
  height: var(--switch-height);
  margin: 0;
  cursor: pointer;
}
.switch input:disabled,
.switch-input:disabled {
  cursor: not-allowed;
}

.switch label,
.switch-label {
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  transition: ease 0.2s background-color;
  display: inline-block;
  border-radius: var(--switch-radius);
  margin: 0;
}
.switch label::before,
.switch-label::before {
  content: "";
  display: inline-block;
  width: var(--switch-height);
  height: var(--switch-height);
  border-radius: var(--switch-radius);
  background-color: var(--switch-label-bg);
  transform: translateX(0) scale(0.75);
  transition: ease 0.2s all;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.switch-input:checked + .switch-label,
.switch input:checked + .switch label {
  background: var(--switch-bg-success);
}
.switch-input:disabled + .switch-label,
.switch input:disabled + .switch label {
  background: var(--switch-bg-disabled);
}
.switch-input:checked + .switch-label::before,
.switch input:checked + .switch label::before {
  transform: translateX(100%) scale(0.75);
}

.modal.fade .modal-dialog__offcanvas.modal-privacy {
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
}


.modal.fade .modal-dialog__offcanvas.modal-consent {
  width: 100%;
  height: auto;
  max-width: 100%;
  transform: translateY(100%);
  top: unset;
  bottom: 0;
}
.modal-dialog__offcanvas.modal-consent .modal-content,
.modal-dialog__offcanvas.modal-privacy .modal-content {
  min-height: 100%;
}
.modal.show .modal-dialog__offcanvas.modal-consent {
  transform: translateY(0);
}
.consent-list {
    list-style: disc;
    margin-left: 16px;
}
.consent-link {
    text-decoration: underline;
}
.modal-consent {
  width: 100%;
  bottom: 0;
}
.modal-consent__description {
  max-width: var(--breakpoint-xl);
}
.preference-trigger {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  line-height: 1;
}
.preference-trigger::before {
    content: "＋";
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    border-radius: 50%;
    line-height: 1;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    margin-left: 0.25rem;
}
.preference-trigger[aria-expanded="true"]::before {
      content: "－";
}
.preference-trigger:hover::before {
  background: var(--gray-light);
}