@import 'tailwindcss' source('../../templates');
@import 'tailwindcss' source('../../modules');
@import '../../node_modules/lite-youtube-embed/src/lite-yt-embed.css';
@import './forms.css';
@import './tables.css';
@import './buttons.css';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@theme {
  --breakpoint-2xl: 1536px;

  --spacing-9xl: 96rem;

  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);

  --color-textPrimary-100: var(--text-primary-100);
  --color-textPrimary-200: var(--text-primary-200);
  --color-textPrimary-300: var(--text-primary-300);
  --color-textPrimary-400: var(--text-primary-400);
  --color-textPrimary-500: var(--text-primary-500);

  --color-secondary-200: var(--secondary-200);
  --color-secondary-400: var(--secondary-400);
  --color-secondary-700: var(--secondary-700);
  --color-secondary-800: var(--secondary-800);

  --color-textSecondary-200: var(--text-secondary-200);
  --color-textSecondary-400: var(--text-secondary-400);
  --color-textSecondary-700: var(--text-secondary-700);
  --color-textSecondary-800: var(--text-secondary-800);

  --color-mobileMenuButtons-headerText: var(--mobile-menu-buttons-header-text);
  --color-mobileMenuButtons-contentText: var(
    --mobile-menu-buttons-content-text
  );
  --color-mobileMenuButtons-divider: var(--mobile-menu-buttons-divider);
  --color-mobileMenuButtons-leftColor: var(--mobile-menu-buttons-left-color);
  --color-mobileMenuButtons-rightColor: var(--mobile-menu-buttons-right-color);

  --cols-automin-xs: repeat(auto-fill, minmax(240px, 1fr));
  --cols-automin-sm: repeat(auto-fill, minmax(320px, 1fr));
  --cols-automin-md: repeat(auto-fill, minmax(480px, 1fr));

  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-4xl: 3rem;
  --radius-5xl: 4.5rem;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}

@utility selection {
  @apply relative after:transition-all after:duration-300 after:ease-in-out after:absolute after:inset-[-1rem] after:-z-10 after:rounded after:bg-primary-500 after:opacity-0 hover:after:opacity-10 after:rounded-[inherit];
}

.border-zigzag-t:before {
  background:
    linear-gradient(-45deg, white 16px, red 16px, blue 16px, transparent 0),
    linear-gradient(45deg, white 16px, transparent 0);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 10px 24px;
  content: '';
  display: block;
  width: 100%;
  height: 8px;
  position: absolute;
  top: -8px;
  right: 0;
  left: 0;
}

.border-zigzag-b:after {
  background:
    linear-gradient(-45deg, transparent 8px, white 0),
    linear-gradient(45deg, transparent 8px, white 0);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 10px 20px;
  content: '';
  display: block;
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: -8px;
  right: 0;
  left: 0;
}

/* .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .visually-hidden.focus-able:active,
  .visually-hidden.focus-able:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
  } */

#fc_frame.fc-mobile-view.h-open-container {
  max-height: 60vh !important;
}

._CookieScriptReportPageSaveSettingButton {
  @apply flex justify-center items-center px-6 py-4 bg-primary-500 hover:bg-primary-400 text-base text-center leading-tight text-black/70 no-underline cursor-pointer;
}

._CookieScriptReportPageCheckbox {
  margin: 1rem !important;
}

._CookieScriptReportPageCheckboxInput {
  @apply !mr-2 !border !border-solid !border-gray-700;
}

#callback-indicator,
#sending-indicator {
  @apply hidden;
}

#callback-indicator.loading,
#sending-indicator.loading {
  @apply block;
}

.fitMaps-wrapper,
.fitVids-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
}

.fitMaps-wrapper iframe,
.fitVids-wrapper iframe,
.fitMaps-wrapper object,
.fitVids-wrapper object,
.fitMaps-wrapper embed,
.fitVids-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* checkbox with name "contact_me_by_fax_only" */
input[name='contact_me_by_fax_only'] {
  @apply absolute bottom-[-2rem] right-[-2rem] border-transparent bg-transparent text-transparent outline-transparent ring-transparent focus:!border-transparent focus:!bg-transparent focus:!text-transparent focus:!outline-transparent focus:!ring-transparent focus:!shadow-none;
}