.gdpr-cookieconsent-container { display: flex; flex-direction: column; height: 100%; position: fixed; width: 100%; inset: 0; z-index: 9999; &::before { content: ""; flex-grow: 1; background-color: var(--cookieconsent-overlay-color); } --cookieconsent-theme-color: rgb(0 137 203); --cookieconsent-overlay-color: rgb(0 0 0 / 0.75); --cookieconsent-bg-color: rgb(255 255 255 / 0.95); --cookieconsent-group-bg-color: rgb(255 255 255); --cookieconsent-button-text-color: rgb(255 255 255); --cookieconsent-button-primary-color: var(--cookieconsent-theme-color); --cookieconsent-button-secondary-color: rgb(255 255 255); --cookieconsent-button-primary-text-color: var(--cookieconsent-button-text-color); --cookieconsent-button-secondary-text-color: rgb(0 0 0); --cookieconsent-button-borderradius: 4px; --cookieconsent-spacing: 1rem; --cookieconsent-width: 1200px; --cookieconsent-focus-outline: black solid 2px; --cookieconsent-focus-outline-offset: 2px; } .gdpr-cookieconsent-settings { overflow-x: auto; background-color: var(--cookieconsent-bg-color); position: relative; & .hidden { display: none; } &__content { max-width: var(--cookieconsent-width); width: 100%; margin: 0 auto; padding-block-start: calc(var(--cookieconsent-spacing) * 2); padding-inline: calc(var(--cookieconsent-spacing) * 2); display: flex; justify-content: space-between; flex-wrap: wrap; @media only screen and (max-width: 1224px) { padding-inline: calc(var(--cookieconsent-spacing) * 3); } &__info { flex: 1 0; &__description { margin-top: calc(var(--cookieconsent-spacing) * 2); font-size: 1rem; &--main {} &--settings {} } } &__cta { min-width: 20%; display: flex; flex-direction: column; margin-left: var(--cookieconsent-spacing); @media only screen and (max-width: 1224px) { flex: 0 0 100%; width: 100%; margin: calc(var(--cookieconsent-spacing) * 2) 0 0; } :where(button.gdpr-cc-button) { all: unset; //reset site stlyes for button element and only use our styles } .gdpr-cc-button { width: 100%; text-align: center; font-size: 1rem; min-height: 45px; background: var(--cookieconsent-button-primary-color); border: none; color: var(--cookieconsent-button-primary-text-color); border-radius: var(--cookieconsent-button-borderradius); cursor: pointer; white-space: nowrap; box-sizing: border-box; padding-inline: calc(var(--cookieconsent-spacing) / 2); &--secondary { background: var(--cookieconsent-button-secondary-color); color: var(--cookieconsent-button-secondary-text-color); border-style: solid; border-color: var(--cookieconsent-button-primary-color); border-width: 3px; } & + .gdpr-cc-button { margin-top: calc(var(--cookieconsent-spacing) / 2); @media only screen and (max-width: 1224px) { margin-top: var(--cookieconsent-spacing); } } &:hover { filter: brightness(0.9) } &:focus-visible { outline: var(--cookieconsent-focus-outline); outline-offset: var(--cookieconsent-focus-outline-offset); } } } &__settings { width: 100%; margin-top: calc(var(--cookieconsent-spacing) * 1); } &__links { margin: calc(var(--cookieconsent-spacing) * 1) 0; width: 100%; a, span { font-weight: 700; } span { padding: 0 5px; } } } &__close { position: absolute; top: calc(var(--cookieconsent-spacing) * 1); right: calc(var(--cookieconsent-spacing) * 1); } } .gdpr-cookieconsent-setting-group { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 1rem; background-color: var(--cookieconsent-group-bg-color); padding: calc(var(--cookieconsent-spacing) * 1.5); &__switch, &__description, &__details { flex: 1 0 100%; } &__description, &__details{ margin-top: var(--cookieconsent-spacing); } &__cookies { flex: 1 0 100%; margin-top: calc(var(--cookieconsent-spacing) * 1); } & + & { margin-top: calc(var(--cookieconsent-spacing) * 1); } &__details { text-align: right; color: var(--cookieconsent-theme-color); font-weight: bold; line-height: 1; &:hover { cursor: pointer; color: var(--cookieconsent-theme-color); } &--close, &--open {} } } .gdpr-cookieconsent-cookie { display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1 0 100%; &__attributes { flex: 0 0 100%; width: 100%; } &__switch { flex: 1 0 100%; } & + & { margin-top: calc(var(--cookieconsent-spacing) * 1); } } .gdpr-cookieconsent-cookie-attribute { flex: 0 0 100%; display: flex; flex-wrap: wrap; font-size: 1rem; &__value {} &__label { flex-basis: 30%; } } .gdpr-cookieconsent-switch { all: unset; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; cursor: pointer; -webkit-tap-highlight-color: transparent; --cookieconsent-switch-thumb-size: 1.5rem; --cookieconsent-switch-thumb-color: rgb(255 255 255); --cookieconsent-switch-thumb-highlight-color: rgba(0 0 0 / 0.25); --cookieconsent-switch-length: calc(var(--cookieconsent-switch-thumb-size) * 2); --cookieconsent-switch-padding: 4px; --cookieconsent-switch-inactive-color: rgb(204 204 204); --cookieconsent-switch-active-color: var(--cookieconsent-theme-color); --cookieconsent-switch-thumb-size-small: 1rem; --cookieconsent-switch-outline: var(--cookieconsent-focus-outline); --cookieconsent-switch-outline-offset: var(--cookieconsent-focus-outline-offset); &--group { font-size: 1.5rem; font-weight: bold; } &--cookie { min-width: 50%; font-size: 1rem; line-height: 1.5; font-weight: bold; --cookieconsent-switch-thumb-size: var(--cookieconsent-switch-thumb-size-small); } & > input { all: unset; appearance: none; position: relative; inline-size: var(--cookieconsent-switch-length); block-size: var(--cookieconsent-switch-thumb-size); padding: var(--cookieconsent-switch-padding); background: var(--cookieconsent-switch-inactive-color); transition: background-color .25s ease; border-radius: var(--cookieconsent-switch-length); border: none; box-sizing: content-box; --_cookieconsent-switch-thumb-position: 0%; /* Thumb */ &::before { --_cookieconsent-switch-highlight-size: 0; content: ""; border-radius: 50%; box-shadow: 0 0 0 var(--_cookieconsent-switch-highlight-size) var(--cookieconsent-switch-thumb-highlight-color); cursor: pointer; pointer-events: auto; position: absolute; inline-size: var(--cookieconsent-switch-thumb-size); block-size: var(--cookieconsent-switch-thumb-size); background: var(--cookieconsent-switch-thumb-color, white); transform: translateX(var(--_cookieconsent-switch-thumb-position)); transition: transform 0.25s, box-shadow 0.1s; } &:not(:disabled):hover::before { @media (hover: none) { --_cookieconsent-switch-highlight-size: 0; } --_cookieconsent-switch-highlight-size: .5rem; } &:checked { background: var(--cookieconsent-switch-active-color); --_cookieconsent-switch-thumb-position: calc(var(--cookieconsent-switch-length) - 100%); } &:disabled { cursor: not-allowed; &::before { cursor: not-allowed; } } &:focus-visible { outline: var(--cookieconsent-switch-outline); outline-offset: var(--cookieconsent-switch-outline-offset); } } }