/*
This file will be removed!
 
Please do not add CSS here. Instead use Tailwind classes!
*/

/* Import scoped CSS rules for components 
   import "./_components.css"; */

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

html,
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  text-size-adjust: none; /* Prevent automatic zooming of fonts on some mobile devices. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; /* Consistent font display behavior on OSX. */
  -moz-osx-font-smoothing: grayscale; /* Consistent font display behavior on OSX. */
  
  --base--space: 16px;
  --base--font-size: 16px;
  --base--line-height: 20px;

  --border-style: solid;
  --border-width: 1px;
  --border-i-width: 2px;
  --border: 1px solid;
  --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);

  --breakpoint--small: 500px;
  --breakpoint--medium: 800px;
  --breakpoint--large: 1080px;
  --breakpoint--xlarge: 1200px;

  --font-face--regular--font-family: DM Sans;
  --font-face--regular--font-style: normal;
  --font-face--regular--font-display: swap;
  --font-face--regular--unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  --font-face--regular--font-weight: 400;
  --font-face--regular--src: local("DMSans-Regular"), local("DM Sans Regular"), url("/moon/assets/fonts/DMSans-Regular.woff2") format("woff2");

  --font-face--semibold--font-family: DM Sans;
  --font-face--semibold--font-style: normal;
  --font-face--semibold--font-display: swap;
  --font-face--semibold--unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  --font-face--semibold--font-weight: 500;
  --font-face--semibold--src: local("DMSans-Semibold"), local("DM Sans Semibold"), url("/moon/assets/fonts/DMSans-Semibold.woff2") format("woff2");
          
  --font-family: DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --font-size: 14;
  --font-weight--normal: 400;
  --font-weight--semibold: 500;

  --max-width--default: 1024;
  --max-width--large: 1440;

  --opacity--disabled: 0.35;

  --radius--small: 4px;
  --radius--default: 8px;
  --radius--largest: 100px;

  --space--xsmall: 4px;
  --space--small: 8px;
  --space--default: 16px;
  --space--medium: 24px;
  --space--large: 32px;
  --space--xlarge: 40px;

  --transition-duration--slow: 0.4s;
  --transition-duration--default: 0.2s;

  --z-index--carousel-control: 5;
  --z-index--dialog: 5;
  --z-index--toggle: 1;
  
  color: rgba(var(--bulma));
  background-color: rgba(var(--goku));
}

@layer components {
  .moon-input-group.horizontal > div:first-child input {
    @apply ltr:rounded-tr-none ltr:rounded-br-none ltr:input-rsb-hidden ;
  }
  .moon-input-group.horizontal > div:first-child input:hover {
    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
  }
  .moon-input-group.horizontal > div:last-child input {
    @apply ltr:rounded-tl-none ltr:rounded-bl-none ltr:input-lsb-hidden ;
  }
  .moon-input-group.horizontal > div:last-child input:hover {
    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
  }

  .moon-input-group.horizontal.rtl-aware > div:first-child input {
    @apply rtl:rounded-tl-none rtl:rounded-bl-none rtl:input-lsb-hidden;
  }
  .moon-input-group.horizontal.rtl-aware > div:first-child input:hover {
    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
  }
  .moon-input-group.horizontal.rtl-aware > div:last-child input {
    @apply rtl:rounded-tr-none rtl:rounded-br-none rtl:input-rsb-hidden;
  }
  .moon-input-group.horizontal.rtl-aware > div:last-child input:hover {
    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
  }

  .moon-input-group.vertical > div:first-child input {
    @apply rounded-bl-none rounded-br-none input-bbb-hidden;
  }
  .moon-input-group.vertical > div:first-child input:hover {
    @apply rounded-moon-i-md;
  }
  .moon-input-group.vertical > div:last-child input {
    @apply rounded-tl-none rounded-tr-none input-tbb-hidden;
  }
  .moon-input-group.vertical > div:last-child input:hover {
    @apply rounded-moon-i-md;
  }
  .carousel-item {
    scroll-snap-type: x;
    scroll-snap-align: start;
    overflow: hidden;
    white-space: normal;
    vertical-align: top;
  }
  .moon-icon {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-logo {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-country-flag {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-currency {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-asset {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-duotone {
    @apply inline-block align-middle text-piccolo;
  }
  .moon-pattern {
    @apply inline-block align-middle text-piccolo;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scroll-snap-x-mandatory {
    scroll-snap-type: x mandatory;
  }
  .scroll-snap-align-start {
    scroll-snap-align: start;
  }
  .radio-button-checked-outline {
    box-shadow: inset 0 0 0 0.1rem var(--piccolo);   
  }  
  .radio-button-unchecked-outline {
    box-shadow: inset 0 0 0 0.1rem var(--trunks);  
  }
  .radio-button-hover {
    background-color: rgba(0, 0, 0, 0.08)
  }
}

@layer utilities {
  .animation-delay-minus-45 {
    animation-delay: -0.45s;
  }
  .animation-delay-minus-30 {
    animation-delay: -0.3s;
  }
  .animation-delay-minus-15 {
    animation-delay: -0.15s;
  }
  .hide-visually {   
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  } 
}

[x-cloak] {
  display: none !important;
}

input.date-icon-hidden[type="date"]::-webkit-inner-spin-button,
input.date-icon-hidden[type="date"]::-webkit-calendar-picker-indicator,
input.date-icon-hidden[type="datetime-local"]::-webkit-inner-spin-button,
input.date-icon-hidden[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400;
  src: local("DMSans-Regular"), local("DM Sans Regular"), url("/moon/assets/fonts/DMSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 500;
  src: local("DMSans-Semibold"), local("DM Sans Semibold"), url("/moon/assets/fonts/DMSans-Semibold.woff2") format("woff2");
}

/* @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap'); */
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb54C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb54C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}