/* Smooth transitions for color scheme changes */
/* This might interfere with color transitions for links. Revisit when doing light mode theming */
/*
html,
body,
body * {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
*/

#theme-toggle {
  display: flex;
  align-items: center;
  padding: 0;
  margin-top: -1.3em;
  font: inherit;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--footer-link);
  cursor: pointer;
  background: none;
  border: none;
  /* Hover color only on devices that truly support hover - avoids hover styles being lodged on after tapping on touch devices
  */
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: var(--wp--preset--color--footer-link-hover);
    }
  }
  &::before {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    content: "";
    background-color: var(--wp--preset--color--credits-text);
    -webkit-mask-image: var(--wp--custom--icons--bulb-off);
    mask-image: var(--wp--custom--icons--bulb-off);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  @media (max-width: 875px) {
    margin-top: 0.1em;
  }
}

body {
  color-scheme: dark;
  &.light {
    /* Override default semantic variable values */

    /* These two are automaticlaly applied to text and background colors */
    --wp--preset--color--base: var(--wp--preset--color--white);
    --wp--preset--color--contrast: var(--wp--custom--swatches--grey--400);

    /* Page background */
    --wp--custom--backgrounds--page--current: var(
      --wp--custom--backgrounds--page--light
    );

    /* Header */
    --wp--preset--color--header-bg: var(--wp--custom--swatches--grey--450);
    --wp--custom--backgrounds--header--current: var(
      --wp--custom--backgrounds--header--light
    );

    /* Cards */
    --wp--preset--color--card-bg: var(--wp--custom--swatches--grey--25);
    --wp--custom--backgrounds--card--current: var(
      --wp--custom--backgrounds--card--light
    );

    /* Form elements */
    --wp--preset--color--input-bg: var(--wp--preset--color--white);
    --wp--preset--color--input-border: var(--wp--custom--swatches--grey--50);
    --wp--preset--color--input-border-focus: var(
      --wp--custom--swatches--gold--100
    );
    --wp--preset--color--button-color: var(--wp--preset--color--white);
    --wp--preset--color--button-bg: var(--wp--custom--swatches--gold--200);
    --wp--preset--color--input-border-invalid: var(
      --wp--custom--swatches--red--200
    );

    /* Footer */
    --wp--preset--color--footer-border: var(--wp--custom--swatches--gold--100);
    --wp--preset--color--footer-bg: var(--wp--custom--swatches--grey--350);
    --wp--custom--backgrounds--footer--current: var(
      --wp--custom--backgrounds--footer--light
    );
    --wp--preset--color--footer-heading: var(--wp--preset--color--white);
    --wp--preset--color--footer-link: var(--wp--custom--swatches--grey--100);
    --wp--preset--color--footer-link-hover: var(--wp--preset--color--white);
    --wp--preset--color--footer-separator: var(
      --wp--custom--swatches--grey--250
    );

    --wp--preset--color--credits-border: var(--wp--custom--swatches--grey--300);
    --wp--preset--color--credits-bg: var(--wp--custom--swatches--grey--300);
    --wp--preset--color--credits-text: var(--wp--custom--swatches--grey--200);
    --wp--preset--color--credits-link-hover: var(
      --wp--custom--swatches--grey--200
    );

    /* Pullquotes */
    --wp--preset--color--pullquote-border: var(
      --wp--custom--swatches--grey--100
    );
    --wp--preset--color--pullquote-text: var(--wp--custom--swatches--grey--300);

    /* Separator */
    --wp--preset--color--separator: var(--wp--preset--color--white);

    color-scheme: light;

    .wp-block-separator {
      box-shadow: 0 -1px 0 rgb(191 191 191 / 1); /* Grey 25 */
    }

    footer {
      .is-style-footer-separator {
        box-shadow: -1px 0 0 rgb(40 40 40 / 1); /* Grey 500 */
      }
      .social-links li::before {
        background-color: var(--wp--preset--color--footer-link);
      }
      .is-style-footer-nav-grid.is-layout-flex {
        > div:nth-child(1)::after,
        > div:nth-child(3)::after {
          background: var(--wp--preset--color--footer-separator);
          box-shadow: 0 -1px rgb(40 40 40 / 1); /* Grey 500 */
        }
      }
    }

    #cmplz-document {
      .cmplz-dropdown,
      .cmplz-category {
        background-color: var(--wp--custom--swatches--grey--25) !important;
        summary,
        .cmplz-category-header {
          background-color: var(--wp--custom--swatches--grey--50) !important;
        }
        .cookies-per-purpose {
          div {
            background-color: var(--wp--custom--swatches--grey--50);
            &[class$="header"] {
              background-color: var(--wp--custom--swatches--grey--25);
            }
          }
        }
      }
    }

    #theme-toggle {
      &::before {
        background-color: var(--wp--preset--color--footer-link);
        -webkit-mask-image: var(--wp--custom--icons--bulb-on);
        mask-image: var(--wp--custom--icons--bulb-on);
      }
    }
  }
}