/* Background color
-------------------------------*/
@each $color, $value in $theme-colors {
  .#{$color}-bg-alt {
    background-color: rgba($value, 0.1);
  }
  .#{$color}-bg {
    background-color: $value;
  }
  .#{$color}-after {
    &:after {
      background-color: $value;
    }
  }
  .#{$color}-before {
    &:before {
      background-color: $value;
    }
  }
  .#{$color}-color-alt {
    color: rgba($value, 0.65);
  }
  .#{$color}-color {
    color: $value;
  }
}

.theme-gradient {
  background: rgb(254, 144, 27);
  background: radial-gradient(
    circle,
    rgba(254, 144, 27, 1) 0%,
    rgba(254, 61, 10, 1) 100%
  );
}

.theme2nd-gradient {
  background: radial-gradient(circle, #23d84b 0%, #07a713 100%);
}

.white-color-light {
  color: rgba($px-white, 0.65);
}

.bg-transparent {
  background-color: transparent;
}

.theme-g-bg {
  background: linear-gradient(to right, $px-theme, $px-theme3rd);
}
.dark-g-bg {
  background: linear-gradient(50deg, #273444 0, #272b44 100%);
}

/*	Property
---------------------------*/
.bg-cover {
  background-size: cover;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.bg-fixed {
  background-attachment: fixed;
}
.bg-center {
  background-position: center;
}

/* hover color
-------------------------------*/
.theme-hover-bg {
  &:hover {
    background: $px-theme;
    h6 {
      color: $px-white;
    }
    p {
      color: $px-white;
    }
  }
}

/*	SVG fill
---------------------------*/
.svg_img {
  polygon,
  path {
    fill: currentColor;
  }
}

mark {
  color: inherit;
  padding: 0;
  background: 0 0;
  background-image: linear-gradient(
    120deg,
    rgba($px-theme, 0.4) 0,
    rgba($px-theme, 0.4) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 80%;
  position: relative;
}

/*  Gradient Bg
---------------------------*/
.g-bg-1 {
  background-color: #ffffff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0%,
    #6284ff 50%,
    #ff0000 100%
  );
}

.g-bg-2 {
  background-color: #fee140;
  background-image: linear-gradient(90deg, #fee140 0%, #fa709a 100%);
}

.g-bg-3 {
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}

.g-bg-4 {
  background-color: #74ebd5;
  background-image: linear-gradient(90deg, #74ebd5 0%, #9face6 100%);
}

.g-bg-5 {
  background-color: #fad961;
  background-image: linear-gradient(90deg, #fad961 0%, #f76b1c 100%);
}

.g-bg-6 {
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
}

.g-bg-7 {
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.g-bg-8 {
  background-image: linear-gradient(
    to right,
    #ff8177 0%,
    #ff867a 0%,
    #ff8c7f 21%,
    #f99185 52%,
    #cf556c 78%,
    #b12a5b 100%
  );
}

.g-bg-9 {
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.g-bg-9 {
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}