@import "components/mixins.scss";
@import "components/half_columns.scss";
@import "components/colors.scss";
@import "components/typography.scss";
@import "components/functions.scss";
@import "components/header_top.scss";
@import "components/header_middle.scss";
@import "components/header_bottom.scss";
@import "components/breadcrumb.scss";
@import "components/shopping_cart.scss";
@import "components/login_modal.scss";
@import "components/login_form.scss";
@import "components/login_page.scss";
@import "components/password_reset.scss";
@import "components/filters.scss";
@import "components/sidebar.scss";
@import "components/home_page.scss";
@import "components/contact_page.scss";
@import "components/category_page.scss";
@import "components/product.scss";
@import "components/product_carousel.scss";
@import "components/pagination.scss";
@import "components/internal.scss";
@import "components/checkout.scss";
@import "components/footer.scss";
@import "components/order_complete.scss";
@import "components/profile.scss";
@import "components/blog.scss";
@import "components/blog_detail.scss";

:root, body {
  font-family: 'Roboto', sans-serif;
}

body {
  background-image: url("/frontend/images/background.png");
  color: $dark-gray;
  scroll-behavior: smooth;
}

.content {
  background-color: $white;
  box-shadow: 0px 0px 7px 1px rgb(0 0 0 / 10%);
  padding-top: 200px;

  & .internal {
    & h1 {
      font-size: rem(20);
      font-weight: $fw-bold;
    }
  }
}


input.form-control{
  border-color: $light-gray-text;
  border-radius: 5px;
  &:focus{
    box-shadow: none;
    border-color: $light-gray-text;
  }
}

@media(max-width: 768px) {
  .content {
    flex-direction: column-reverse;
    padding-top: 65px;
  }
}

@media(min-width: 769px) {
  .content {
    flex-direction: column-reverse;
    padding-top: 130px;
  }
}

@media (min-width: 993px) {
  .content {
    flex-direction: row;
    padding-top: 165px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1440px;
  }

  .content {
    flex-direction: row;
    padding-top: 200px;
  }
}

.shine {
	position: relative;
	overflow: hidden;

	&::before {
		background: linear-gradient(
			to right,
			fade_out(#fff, 1) 0%,
			fade_out(#fff, 0.7) 100%
		);
		content: "";
		display: block;
		height: 100%;
		left: -75%;
		position: absolute;
		top: 0;
		transform: skewX(-25deg);
		width: 50%;
		z-index: 2;
	}

	&:hover,
	&:focus {
		&::before {
			animation: shine 0.85s;
		}
	}

	@keyframes shine {
		100% {
			left: 125%;
		}
	}
}