/* Background colour utility classes */
/* Using custom properties so child elements can also use these colours */
:root {
  --bg-color: transparent;
  --fg-color: var(--color-grey-dk);
  --link-hover-color: var(--fg-color);
  --blockquote-quote-color: var(--color-blue);
}

.bg-color {
  --blockquote-quote-color: var(--fg-color);
  background-color: var(--bg-color);
  color: var(--fg-color);
  padding: var(--vertical-padding) var(--responsive-padding);

  &.container {
    padding: var(--vertical-padding);
  }

  a:not(.btn) {
    color: var(--link-color);

    &:is(:hover,:focus) {
      color: var(--link-hover-color);
    }
  }

  h2 a,
  h3 a {
    color: var(--fg-color);
  }
}

@media (min-width: 1240px) {
  .bg-color {
    padding-left: var(--vertical-padding);
    padding-right: var(--vertical-padding);
  }
}

.bg-color--white {
  --bg-color: var(--color-white);
  --fg-color: var(--color-grey-dk);
  --link-color: var(--color-blue);
}

.bg-color--dk-grey,
.bg-color--dark-grey {
  --bg-color: var(--color-grey-dk);
  --fg-color: var(--color-white);
  --link-color: var(--color-grey-lt);
}

.bg-color--light-grey {
  --bg-color: var(--color-grey-lt);
  --link-color: var(--color-grey-dk)
}

.bg-color--blue {
  --bg-color: var(--color-blue);
  --fg-color: var(--color-white);
  --link-color: var(--color-white);
  --link-hover-color: var(--color-blue-lt);
}

.bg-color--light-blue {
  --bg-color: var(--color-blue-lt);
  --fg-color: var(--color-black);
  --link-color: var(--color-black);
  --link-hover-color: var(--color-blue);
  --blockquote-quote-color: var(--color-blue);
}

.bg-color--teal {
  --bg-color: var(--color-teal);
  --fg-color: var(--color-white);
  --link-color: var(--color-white);
  --link-hover-color: var(--color-teal-lt);
}

.bg-color--light-teal {
  --bg-color: var(--color-teal-lt);
  --fg-color: var(--color-black);
  --link-color: var(--color-black);
  --link-hover-color: var(--color-teal);
  --blockquote-quote-color: var(--color-teal);
}

.bg-color--pink {
  --bg-color: var(--color-pink);
  --fg-color: var(--color-white);
  --link-color:  var(--color-white);
  --link-hover-color: var(--color-pink-lt);
}

.bg-color--light-pink {
  --bg-color: var(--color-pink-lt);
  --fg-color: var(--color-black);
  --link-color: var(--color-black);
  --link-hover-color: var(--color-pink);
  --blockquote-quote-color: var(--color-pink);
}

.bg-color--green {
  --bg-color: var(--color-green);
  --fg-color: var(--color-white);
  --link-color:  var(--color-white);
  --link-hover-color: var(--color-green-lt);
}

.bg-color--light-green {
  --bg-color: var(--color-green-lt);
  --fg-color: var(--color-black);
  --link-color: var(--color-black);
  --link-hover-color: var(--color-green);
  --blockquote-quote-color: var(--color-green);
}

/* Reversed buttons for darker bg colours */

.bg-color--blue,
.bg-color--pink,
.bg-color--teal,
.bg-color--green,
.bg-color--dark-grey {
  --btn-bg-color: var(--color-white);
  --btn-fg-color: var(--color-black);
  --btn-hover-fg-color: var(--bg-color);
  --btn-hover-bg-color: var(--link-hover-color);
}

.bg-color--light-blue,
.bg-color--light-pink,
.bg-color--light-teal,
.bg-color--light-green,
.bg-color--light-dark-grey {
  --btn-bg-color: var(--color-black);
  --btn-fg-color: var(--color-white);
  --btn-hover-bg-color: var(--link-hover-color);
}
/* Clips for section background colours */

.bg-color.fullwidth {
  clip-path: var(--clip-wide-bottom1);
}

.bg-color.container {
  clip-path: var(--clip-bottom-right);
}

/* Fix layout builder */

.layout-builder__layout.bg-color.lb-preview {
  .layout-builder-block {
    background: transparent;
  }

  .layout-builder__add-block {
    background: rgba(225,225,255,0.2);
  }
}