.bg-white {
  background-color: $white;

  --body-font-color: #{$black-800};

  --h6-color: #{$black-600};

  --button-link-normal-text-color: #{$blue};
  --button-link-hover-text-color: #{$blue};
}

.bg-gray {
  background-color: $gray-light;

  --h6-color: #{$black-600};

  --button-link-normal-text-color: #{$blue};
  --button-link-hover-text-color: #{$blue};
}

.bg-gray-normal{
  background-color: $gray;
}

.bg-gray-gradient {
  background: linear-gradient(180deg, $gray, $gray-light);
}

.bg-dark,
.bg-dark-gradient {
  background-color: #20222B;

  --h1-color: #{$white};
  --h2-color: #{$white};
  --h4-color: #{$white};
  --h5-color: #{$white};
  --h5-sub-title-color: #{$white-600};

  --body-font-color: #{$white};
  --default-border-color: rgba(255, 255, 255, 0.2);

  --anchor-link-normal-color: #{white};
  --anchor-link-hover-color: #{white};

  --button-primary-normal-bg-color: #{$white};
  --button-primary-normal-border-color: #{$white};
  --button-primary-normal-text-color: #{$black};

  --button-primary-hover-bg-color: #{$blue-medium};
  --button-primary-hover-border-color: #{$blue-medium};
  --button-primary-hover-text-color: #{$white};

  --button-secondary-normal-bg-color: transparent;
  --button-secondary-normal-border-color: #{$white};
  --button-secondary-normal-text-color: #{$white};

  --button-secondary-hover-bg-color: #{$blue-medium};
  --button-secondary-hover-border-color: #{$blue-medium};
  --button-secondary-hover-text-color: #{$white};

  --button-link-normal-text-color: #{$white-800};
  --button-link-hover-text-color: #{$white};

  --button-text-normal-text-color: #{$white-800};
  --button-text-hover-text-color: #{$white};
}

.bg-dark-gradient {
  background: linear-gradient(180deg, $dark 0%, $dark-light 100%);
}

.bg-black-300 {
  background-color: $black-300;
}

.bg-blue {
  background-color: $blue;

  --h2-color: #{$white};
  --h5-color: #{$white};
  --h5-sub-title-color: #{$white-600};
  --h6-color: #{$white};

  --body-font-color: #{$white};

  --button-primary-normal-bg-color: #{$white};
  --button-primary-normal-border-color: #{$white};
  --button-primary-normal-text-color: #{$blue};

  --button-primary-hover-bg-color: #{$blue-medium};
  --button-primary-hover-border-color: #{$blue-medium};
  --button-primary-hover-text-color: #{$white};

  --button-secondary-normal-bg-color: transparent;
  --button-secondary-normal-border-color: #{$white};
  --button-secondary-normal-text-color: #{$white};

  --button-secondary-hover-bg-color: #{$blue-medium};
  --button-secondary-hover-border-color: #{$blue-medium};
  --button-secondary-hover-text-color: #{$white};
}

.bg-green {
  background-color: $green;

  --body-font-color: #{$white};
}

.bg-gradient-orange {
  background: linear-gradient(93.24deg,#eb4925,#efa433);

  --body-font-color: #{$white};
  --h2-color: #{$white};

  --button-primary-normal-bg-color: #{$white};
  --button-primary-normal-border-color: #{$white};
  --button-primary-normal-text-color: #{$orange};

  --button-primary-hover-bg-color: #{$orange};
  --button-primary-hover-border-color: #{$orange};
  --button-primary-hover-text-color: #{$white};
}

.bg-gradient-blue {
  background: linear-gradient(93.24deg,#3d3fea,#33abef);

  --body-font-color: #{$white};
  --h2-color: #{$white};

  --button-primary-normal-bg-color: #{$white};
  --button-primary-normal-border-color: #{$white};
  --button-primary-normal-text-color: #{$blue};

  --button-primary-hover-bg-color: #{$blue};
  --button-primary-hover-border-color: #{$blue};
  --button-primary-hover-text-color: #{$white};
}

.bg-gradient-purple {
  background: linear-gradient(93.13deg,#7d3f98,#ba398e 99.34%);

  --body-font-color: #{$white};
  --h2-color: #{$white};

  --button-primary-normal-bg-color: #{$white};
  --button-primary-normal-border-color: #{$white};
  --button-primary-normal-text-color: #{$purple};

  --button-primary-hover-bg-color: #{$purple};
  --button-primary-hover-border-color: #{$purple};
  --button-primary-hover-text-color: #{$white};
}

.bg-white-hover {
  --card-box-shadow: none;
  --card-hover-box-shadow: none;

  &:hover {
    background-color: $white;

    --card-hover-box-shadow: #{$card-hover-box-shadow};
  }
}

.bg-sky {
  background-color: #{$sky};
}

.bg-orange {
  background-color: #{$orange};
}

.bg-pink {
  background-color: #{$pink};
}

.block-bg-none {
  background-color: transparent;

  --button-link-normal-text-color: #{$blue};
  --button-link-hover-text-color: #{$blue};
}

.block-bg-image {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  --h1-color: #{$white};
  --h2-color: #{$white};
  --h3-color: #{$white};
  --h5-color: #{$white-800};
  --h5-sub-title-color: #{$white-600};
  --h6-color: #{$white-800};

  --body-font-color: #{$white-800};

  --color-primary: #{$white};

  --button-primary-normal-bg-color: #{$white};
  --button-primary-normal-border-color: #{$white};
  --button-primary-normal-text-color: #{$black};

  --button-primary-hover-bg-color: #{$blue-medium};
  --button-primary-hover-border-color: #{$blue-medium};
  --button-primary-hover-text-color: #{$white};

  --button-secondary-normal-bg-color: transparent;
  --button-secondary-normal-border-color: #{$white};
  --button-secondary-normal-text-color: #{$white};

  --button-secondary-hover-bg-color: #{$blue-medium};
  --button-secondary-hover-border-color: #{$blue-medium};
  --button-secondary-hover-text-color: #{$white};

  --button-link-normal-text-color: #{$white-800};
  --button-link-hover-text-color: #{$white};

  --button-text-normal-text-color: #{$white-800};
  --button-text-hover-text-color: #{$white};

  &.block-bg-overlay {
    &::after {
      z-index: 0;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0,4,49,.4);;
    }
    
    &.banner {
      &::after {
        background: rgba(36, 43, 72, 0.8);
      }
    }

    .container {
      z-index: 1;
      position: relative;
    }
  }
}