/* ======= */
/* tailwind layers */
@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";

/* ======= */
/* utilities */
@import "../css/utilities/colors.css";
@import "../css/utilities/borders.css";
@import "../css/utilities/typography.css";
@import "../css/utilities/animation.css";
@import "../css/utilities/spacing.css";

/* ======= */
/* base */
@import "../css/base/colors.css";
@import "../css/base/typography.css";
@import "../css/base/forms.css";
@import "../css/base/images.css";
@import "../css/base/tables.css";

/* ======= */
/* components */
/* - atoms */
@import "../css/components/buttons.css";
@import "../css/components/windows.css";
/* - components */
@import "../css/components/header.css";

/* ======= */
/* development */

/* - reset default border color */
*, ::before, ::after {
  @apply color__border-divider-1;
}

/* - update page behavior */
/* - scale with base size */
html {
  scroll-behavior: smooth;
  font-size: var(--type__font-base-size);
}

/* - hide alpine elements until ready */
[x-cloak] {
  @apply !hidden;
}

/* - remove margin on child content */
.m-0--clear {
  p {
    @apply m-0;
  }
}

/* strikethrough */
.strikethrough {
  @apply relative;
}
.strikethrough:before {
  @apply absolute left-0 right-0 z-10 opacity-50;
  content: "";
  top: 50%;
  border-top: 2px solid;
  border-color: var(--color__text-default) !important;
  outline: 1px solid var(--color__background-body);
  -webkit-transform:rotate(-15deg);
  -moz-transform:rotate(-15deg);
  -ms-transform:rotate(-15deg);
  -o-transform:rotate(-15deg);
  transform:rotate(-15deg);
}

/* line-through */
.linethrough {
  text-decoration: line-through;
  text-decoration-color: hsl(0deg 0% 0% / 30%);
  text-decoration-thickness: 2px;
}

/* unavailable */
.unavailable {
  @apply relative;
}

.unavailable:before {
  @apply absolute left-0 right-0 opacity-50;
  content: "";
  top: 50%;
  border-top: 2px solid;
  border-color: var(--color__text-default) !important;

  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  transform: rotate(-15deg);
}


/* - scrollbars */
.hidescrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hidescrollbar::-webkit-scrollbar {
  display: none;
}
.showscrollbar::-webkit-scrollbar {
  @apply h-1;
}
.showscrollbar::-webkit-scrollbar-track {
  @apply color__bg-shade-1;
}
.showscrollbar::-webkit-scrollbar-thumb {
  @apply color__bg-shade-2 cursor-ew-resize;
}
.showscrollbar::-ms-scrollbar {
  @apply h-1;
}
.showscrollbar::-ms-track {
  @apply color__bg-shade-1;
}
.showscrollbar::-ms-thumb {
  @apply color__bg-shade-2 cursor-ew-resize;
}

/* - flag stuff */
.fi {
  @apply relative inline-block pr-2 bg-center bg-no-repeat bg-contain;
  width: 1.33333333em;
  line-height: 1em;
}
.fi:before {
  content: "\00a0";
}

/* 3d model viewer */
.btn[data-shopify-xr-hidden] {
  @apply hidden;
}
@media screen and (max-width: 749px) {
  .btn:not([data-shopify-xr-hidden]) {
    @apply inline-flex;
  }
}

/* store locator */
.gmnoprint {
  min-height: 28px;
}
.gm-style-cc {
  min-height: 28px;
}

/* Page layout adjustment */
.rte img {
  display: initial;
}
.rte {
  display: block;
  flex-direction: column;
}
.editor-content {
    p:empty {
      @apply pt-4;
    }
  }

/* mapbox styling */
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  background-color: transparent !important;
  padding: 5px !important;
  opacity: 0.5 !important;
}

/* Customer template */
.login a {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

.login a[href='#recover'] {
  margin-left: 0;
  margin-right: 0;
}

.login .field + a {
  margin-top: 1rem;
}

.login p {
  margin: 1.5rem 0;
}

.login h3 {
  margin-top: 1.5rem;
  text-align: left;
  font-size: calc(var(--font-heading-scale) * 1.6rem);
}

#customer_login_guest button {
  margin-top: 0;
}

#recover,
#recover + div {
  display: none;
}

#recover:target {
  display: block;
}

#recover:target + div {
  display: block;
}

#recover:target ~ #login,
#recover:target ~ #login + div {
  display: none;
}

#recover,
#login {
  scroll-margin-top: 20rem;
}

#recover {
  margin-bottom: 0;
}

input[type=range]::-moz-range-thumb {
	pointer-events: all;
  cursor: pointer;
	-moz-appearance: none;
	width: 24px;
	height: 24px;
/* @apply w-6 h-6 appearance-none pointer-events-auto; */
}

/* - add spacing to challenge captcha page */
/* - add spacing to shopify legal pages */
.shopify-challenge__container,
.shopify-policy__container {
  @apply py-40;
}

/* dynamic checkout */
/* https://github.com/Shopify/dawn/blob/main/assets/section-main-product.css */
[data-shopify-buttoncontainer] {
  @apply !justify-center;
  li {
    @apply !grow;
  }
}
.shopify-payment-button__button {
  @apply type__nav;
}
.shopify-payment-button__button--hidden {
  @apply !hidden;
}
.shopify-payment-button__button,
.shopify-payment-button__more-options {
  @apply !border__button--radius overflow-hidden;
}
.shopify-payment-button__button--unbranded {
  @apply !color__bg-secondary !color__secondary hover:color__bg-secondary hover:opacity-75 !px-6 !py-2;
  @apply !leading-normal !tracking-wide;
}
.shopify-payment-button__button--branded {
  @apply hover:color__bg-secondary hover:opacity-75;
  @apply !leading-normal !tracking-wide;
}
.shopify-payment-button__button [role="button"] {
  @apply min-h-0 p-0;
}
.shopify-payment-button__button:focus-within {
  @apply !border--focus;
}
.shopify-payment-button__more-options {
  @apply !color__bg-overlay-1 px-6 py-2;
}

