/**
* NOTE(Tayfun): This style file is specific to Shopify projects and
* should be imported only by those projects. There will be no problem
* if we import this file to a React project but will not be used since
* the class declarations here are specific to Shopify sections.
*/
@import "./hw_slideshow-image-and-text-v1.scss";

.apply-scheme {
  /* color schemes */
  /*
    these statements are needed to have correct precedence
    otherwise bg and text colors are not overridden by
    scheme setting.
    */
  &.color-scheme-1,
  &.color-scheme-2,
  &.color-scheme-3,
  &.color-scheme-4,
  &.color-scheme-5,
  &.color-scheme-6 {
    @apply bg-[var(--scheme-color-1)] text-[var(--scheme-color-2)];
  }
}

@media screen and (max-width: 768px) {
  .mmd\:apply-scheme {
    /* color schemes */
    /*
      these statements are needed to have correct precedence
      otherwise bg and text colors are not overridden by
      scheme setting.
      */
    &.color-scheme-1,
    &.color-scheme-2,
    &.color-scheme-3,
    &.color-scheme-4,
    &.color-scheme-5,
    &.color-scheme-6 {
      @apply bg-[var(--scheme-color-1)] text-[var(--scheme-color-2)];
    }
  }
}