@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* SPACING */
    --amalitech-spacing-1: 0.0625rem;
    --amalitech-spacing-2: 0.125rem;
    --amalitech-spacing-4: 0.25rem;
    --amalitech-spacing-8: 0.5rem;
    --amalitech-spacing-12: 0.75rem;
    --amalitech-spacing-16: 1rem;
    --amalitech-spacing-24: 1.5rem;
    --amalitech-spacing-32: 2rem;
    --amalitech-spacing-40: 2.5rem;
    --amalitech-spacing-48: 3rem;
    --amalitech-spacing-64: 4rem;
    --amalitech-spacing-80: 5rem;
    /* FONT */
    --amalitech-font-family-sans: 'Work Sans', sans-serif;
    --amalitech-font-family-mono: monospace;
    --amalitech-font-size-10: 0.625rem;
    --amalitech-font-size-12: 0.75rem;
    --amalitech-font-size-14: 0.875rem;
    --amalitech-font-size-16: 1rem;
    --amalitech-font-size-20: 1.25rem;
    --amalitech-font-size-24: 1.5rem;
    --amalitech-font-size-32: 2rem;
    --amalitech-font-size-40: 2.5rem;
    --amalitech-font-size-56: 3.5rem;
    --amalitech-font-weight-thin: 100;
    --amalitech-font-weight-extralight: 200;
    --amalitech-font-weight-light: 300;
    --amalitech-font-weight-regular: 400;
    --amalitech-font-weight-medium: 500;
    --amalitech-font-weight-semibold: 600;
    --amalitech-font-weight-bold: 700;
    --amalitech-font-weight-extrabold: 800;
    --amalitech-font-weight-black: 900;
    --amalitech-font-line-height-114: 114%;
    --amalitech-font-line-height-120: 120%;
    --amalitech-font-line-height-125: 125%;
    --amalitech-font-line-height-133: 133%;
    --amalitech-font-line-height-150: 150%;
    --amalitech-font-line-height-160: 160%;
    /* FONT-VARIANT */
    --amalitech-font-variant-body-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-body-size: 1rem;
    --amalitech-font-variant-body-weight: 500;
    --amalitech-font-variant-body-line-height: 150%;
    --amalitech-font-variant-body-letter-spacing: normal;
    --amalitech-font-variant-body-short-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-body-short-size: 1rem;
    --amalitech-font-variant-body-short-weight: 500;
    --amalitech-font-variant-body-short-line-height: 125%;
    --amalitech-font-variant-body-short-letter-spacing: normal;
    --amalitech-font-variant-body-large-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-body-large-size: 1.25rem;
    --amalitech-font-variant-body-large-weight: 500;
    --amalitech-font-variant-body-large-line-height: 160%;
    --amalitech-font-variant-body-large-letter-spacing: normal;
    --amalitech-font-variant-smaller-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-smaller-size: 0.75rem;
    --amalitech-font-variant-smaller-weight: 500;
    --amalitech-font-variant-smaller-line-height: 125%;
    --amalitech-font-variant-smaller-letter-spacing: normal;
    --amalitech-font-variant-label-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-label-size: 0.75rem;
    --amalitech-font-variant-label-weight: 500;
    --amalitech-font-variant-label-line-height: 120%;
    --amalitech-font-variant-label-letter-spacing: normal;
    --amalitech-font-variant-caption-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-caption-size: 0.75rem;
    --amalitech-font-variant-caption-weight: 500;
    --amalitech-font-variant-caption-line-height: 133%;
    --amalitech-font-variant-caption-letter-spacing: normal;
    --amalitech-font-variant-heading-6-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-heading-6-size: 1rem;
    --amalitech-font-variant-heading-6-weight: 700;
    --amalitech-font-variant-heading-6-line-height: 150%;
    --amalitech-font-variant-heading-6-letter-spacing: normal;
    --amalitech-font-variant-heading-5-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-heading-5-size: 1.25rem;
    --amalitech-font-variant-heading-5-weight: 800;
    --amalitech-font-variant-heading-5-line-height: 125%;
    --amalitech-font-variant-heading-5-letter-spacing: normal;
    --amalitech-font-variant-heading-4-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-heading-4-size: 1.5rem;
    --amalitech-font-variant-heading-4-weight: 800;
    --amalitech-font-variant-heading-4-line-height: 133%;
    --amalitech-font-variant-heading-4-letter-spacing: normal;
    --amalitech-font-variant-heading-3-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-heading-3-size: 2rem;
    --amalitech-font-variant-heading-3-weight: 800;
    --amalitech-font-variant-heading-3-line-height: 125%;
    --amalitech-font-variant-heading-3-letter-spacing: normal;
    --amalitech-font-variant-heading-2-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-heading-2-size: 2.5rem;
    --amalitech-font-variant-heading-2-weight: 800;
    --amalitech-font-variant-heading-2-line-height: 120%;
    --amalitech-font-variant-heading-2-letter-spacing: normal;
    --amalitech-font-variant-heading-1-family: 'Work Sans', sans-serif;
    --amalitech-font-variant-heading-1-size: 3.5rem;
    --amalitech-font-variant-heading-1-weight: 800;
    --amalitech-font-variant-heading-1-line-height: 114%;
    --amalitech-font-variant-heading-1-letter-spacing: normal;
    /* COLOR */
    --amalitech-color-primary: hsl(16.19999999999999, 72.7%, 51.2%);
    --amalitech-color-secondary: hsl(228.39999999999998, 17.9%, 33.9%);
    --amalitech-color-dark: hsl(0, 0%, 0%);
    --amalitech-color-light: hsl(0, 0%, 100%);
    --amalitech-color-orange-100: hsl(15.899999999999977, 73.9%, 91%);
    --amalitech-color-orange-200: hsl(16.100000000000023, 73.2%, 81%);
    --amalitech-color-orange-300: hsl(16.100000000000023, 73%, 71%);
    --amalitech-color-orange-400: hsl(13.699999999999989, 72.9%, 61%);
    --amalitech-color-orange-500: hsl(16.19999999999999, 72.7%, 51.2%);
    --amalitech-color-orange-600: hsl(16.19999999999999, 72.4%, 41.2%);
    --amalitech-color-orange-700: hsl(16.19999999999999, 72.3%, 31.2%);
    --amalitech-color-neutral-100: hsl(228, 25%, 92.2%);
    --amalitech-color-neutral-200: hsl(230.79999999999995, 20%, 87.3%);
    --amalitech-color-neutral-300: hsl(231.39999999999998, 20.4%, 79.8%);
    --amalitech-color-neutral-400: hsl(229.70000000000005, 18.5%, 62.9%);
    --amalitech-color-neutral-500: hsl(229.70000000000005, 14.3%, 48%);
    --amalitech-color-neutral-600: hsl(228.39999999999998, 17.9%, 33.9%);
    --amalitech-color-neutral-700: hsl(230, 60%, 15.7%);
    --amalitech-color-green-100: hsl(150, 42.9%, 97.3%);
    --amalitech-color-green-200: hsl(156, 41.7%, 95.3%);
    --amalitech-color-green-300: hsl(158.20000000000005, 45.8%, 90.6%);
    --amalitech-color-green-400: hsl(157.60000000000002, 57.3%, 77.1%);
    --amalitech-color-green-500: hsl(157, 44.8%, 53.1%);
    --amalitech-color-green-600: hsl(166.10000000000002, 34.3%, 39.4%);
    --amalitech-color-green-700: hsl(157.5, 39.5%, 31.8%);
    --amalitech-color-yellow-100: hsl(38.60000000000002, 100%, 97.3%);
    --amalitech-color-yellow-200: hsl(38.69999999999999, 100%, 91.2%);
    --amalitech-color-yellow-300: hsl(38.39999999999998, 100%, 82.5%);
    --amalitech-color-yellow-400: hsl(39, 100%, 73.7%);
    --amalitech-color-yellow-500: hsl(38.69999999999999, 100%, 56.3%);
    --amalitech-color-yellow-600: hsl(39, 77.9%, 33.7%);
    --amalitech-color-yellow-700: hsl(38.39999999999998, 77.4%, 22.5%);
    --amalitech-color-red-100: hsl(0, 69.2%, 97.5%);
    --amalitech-color-red-200: hsl(0, 72.1%, 91.6%);
    --amalitech-color-red-300: hsl(0, 73.8%, 83.5%);
    --amalitech-color-red-400: hsl(0, 73.2%, 75.1%);
    --amalitech-color-red-500: hsl(0, 60.7%, 54.1%);
    --amalitech-color-red-600: hsl(0, 51.1%, 43.3%);
    --amalitech-color-red-700: hsl(0, 51.5%, 32.4%);
    --amalitech-color-blue-100: hsl(225, 100%, 97.6%);
    --amalitech-color-blue-200: hsl(225, 100%, 96.1%);
    --amalitech-color-blue-300: hsl(225.39999999999998, 100%, 92%);
    --amalitech-color-blue-400: hsl(225.29999999999995, 100%, 80.8%);
    --amalitech-color-blue-500: hsl(225, 100%, 60%);
    --amalitech-color-blue-600: hsl(224.89999999999998, 66.5%, 48%);
    --amalitech-color-blue-700: hsl(225.20000000000005, 66.3%, 36.1%);
    --amalitech-color-violet-100: hsl(250, 60%, 98%);
    --amalitech-color-violet-200: hsl(248.60000000000002, 63.6%, 93.5%);
    --amalitech-color-violet-300: hsl(248.60000000000002, 65.6%, 87.5%);
    --amalitech-color-violet-400: hsl(248.60000000000002, 64.9%, 81%);
    --amalitech-color-violet-500: hsl(248.60000000000002, 65.2%, 68.4%);
    --amalitech-color-violet-600: hsl(248.60000000000002, 36.5%, 54.9%);
    --amalitech-color-violet-700: hsl(248.60000000000002, 30.1%, 41%);
    --amalitech-color-teal-100: hsl(185.5, 73.3%, 97.1%);
    --amalitech-color-teal-200: hsl(183.29999999999995, 69.2%, 89.8%);
    --amalitech-color-teal-300: hsl(184.20000000000005, 68.9%, 79.8%);
    --amalitech-color-teal-400: hsl(183.39999999999998, 67.9%, 69.4%);
    --amalitech-color-teal-500: hsl(183.70000000000005, 70.5%, 49.2%);
    --amalitech-color-teal-600: hsl(188.89999999999998, 81.6%, 34.1%);
    --amalitech-color-teal-700: hsl(184.20000000000005, 70.3%, 19.8%);
    --amalitech-color-pink-100: hsl(320, 81.8%, 97.8%);
    --amalitech-color-pink-200: hsl(316, 78.9%, 92.5%);
    --amalitech-color-pink-300: hsl(316.70000000000005, 81.3%, 85.3%);
    --amalitech-color-pink-400: hsl(317.1, 80.5%, 77.8%);
    --amalitech-color-pink-500: hsl(317, 80.9%, 63.1%);
    --amalitech-color-pink-600: hsl(317.20000000000005, 48.4%, 50.6%);
    --amalitech-color-pink-700: hsl(317.1, 47.2%, 37.8%);
    --amalitech-color-primary-hover: hsl(13.699999999999989, 72.9%, 61%);
    --amalitech-color-primary-pressed: hsl(16.19999999999999, 72.4%, 41.2%);
    --amalitech-color-text-standard: hsl(230, 60%, 15.7%);
    --amalitech-color-text-additional: hsl(229.70000000000005, 14.3%, 48%);
    --amalitech-color-text-disabled: hsl(231.39999999999998, 20.4%, 79.8%);
    --amalitech-color-text-link: hsl(16.19999999999999, 72.7%, 51.2%);
    --amalitech-color-text-link-hover: hsl(13.699999999999989, 72.9%, 61%);
    --amalitech-color-text-link-active: hsl(16.19999999999999, 72.4%, 41.2%);
    --amalitech-color-text-link-visited: hsl(16.19999999999999, 72.4%, 41.2%);
    --amalitech-color-text-info: hsl(228.39999999999998, 17.9%, 33.9%);
    --amalitech-color-text-warning: hsl(38.69999999999999, 100%, 56.3%);
    --amalitech-color-text-success: hsl(157, 44.8%, 53.1%);
    --amalitech-color-text-error: hsl(0, 60.7%, 54.1%);
    /* SHADOW */
    --amalitech-shadow-level-0: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-1: 0px 4px 16px 0px hsla(0, 0%, 0%, 0.1), 0px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-2: 0px 8px 32px 0px hsla(0, 0%, 0%, 0.1), 0px 4px 8px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-3: 0px 12px 48px 0px hsla(0, 0%, 0%, 0.1), 0px 6px 12px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-4: 0px 16px 64px 0px hsla(0, 0%, 0%, 0.1), 0px 8px 16px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-5: 0px 20px 80px 0px hsla(0, 0%, 0%, 0.1), 0px 10px 20px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-1-hover: 0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-1-active: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.1), 0px 1px 2px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-2-hover: 0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-2-active: 0px 6px 24px 0px hsla(0, 0%, 0%, 0.1), 0px 3px 6px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-3-hover: 0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-3-active: 0px 10px 40px 0px hsla(0, 0%, 0%, 0.1), 0px 5px 10px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-4-hover: 0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-4-active: 0px 14px 56px 0px hsla(0, 0%, 0%, 0.1), 0px 7px 14px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-5-hover: 0px 22px 88px 0px hsla(0, 0%, 0%, 0.1), 0px 11px 22px 0px hsla(0, 0%, 0%, 0.1);
    --amalitech-shadow-level-5-active: 0px 18px 72px 0px hsla(0, 0%, 0%, 0.1), 0px 9px 18px 0px hsla(0, 0%, 0%, 0.1);
    /* RADIUS */
    --amalitech-radius-1: 1px;
    --amalitech-radius-2: 2px;
    --amalitech-radius-4: 4px;
    --amalitech-radius-8: 8px;
    --amalitech-radius-12: 12px;
    /* OPACITY */
    --amalitech-opacity-50: 0.5;
    /* MOTION */
    --amalitech-motion-duration-immediate: 100ms;
    --amalitech-motion-duration-fast: 200ms;
    --amalitech-motion-duration-slower: 600ms;
    --amalitech-motion-duration-deliberate: 800ms;
    --amalitech-motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1);
    --amalitech-motion-easing-enter: cubic-bezier(0.390, 0.575, 0.565, 1);
    /* Z-INDEX */
    --amalitech-z-index-10: 10;
    --amalitech-z-index-20: 20;
    --amalitech-z-index-30: 30;
    --amalitech-z-index-40: 40;
    --amalitech-z-index-50: 50;
    --amalitech-z-index-60: 60;
    --amalitech-z-index-70: 70
}
/* FONT VARIANT CLASSES */
.amalitech-font-variant-body {
    font-family: var(--amalitech-font-variant-body-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-body-size, 1rem);
    font-weight: var(--amalitech-font-variant-body-weight, 500);
    line-height: var(--amalitech-font-variant-body-line-height, 150%);
    letter-spacing: var(--amalitech-font-variant-body-letter-spacing, normal)
}
.amalitech-font-variant-body-short {
    font-family: var(--amalitech-font-variant-body-short-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-body-short-size, 1rem);
    font-weight: var(--amalitech-font-variant-body-short-weight, 500);
    line-height: var(--amalitech-font-variant-body-short-line-height, 125%);
    letter-spacing: var(--amalitech-font-variant-body-short-letter-spacing, normal)
}
.amalitech-font-variant-body-large {
    font-family: var(--amalitech-font-variant-body-large-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-body-large-size, 1.25rem);
    font-weight: var(--amalitech-font-variant-body-large-weight, 500);
    line-height: var(--amalitech-font-variant-body-large-line-height, 160%);
    letter-spacing: var(--amalitech-font-variant-body-large-letter-spacing, normal)
}
.amalitech-font-variant-smaller {
    font-family: var(--amalitech-font-variant-smaller-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-smaller-size, 0.75rem);
    font-weight: var(--amalitech-font-variant-smaller-weight, 500);
    line-height: var(--amalitech-font-variant-smaller-line-height, 125%);
    letter-spacing: var(--amalitech-font-variant-smaller-letter-spacing, normal)
}
.amalitech-font-variant-label {
    font-family: var(--amalitech-font-variant-label-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-label-size, 0.75rem);
    font-weight: var(--amalitech-font-variant-label-weight, 500);
    line-height: var(--amalitech-font-variant-label-line-height, 120%);
    letter-spacing: var(--amalitech-font-variant-label-letter-spacing, normal)
}
.amalitech-font-variant-caption {
    font-family: var(--amalitech-font-variant-caption-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-caption-size, 0.75rem);
    font-weight: var(--amalitech-font-variant-caption-weight, 500);
    line-height: var(--amalitech-font-variant-caption-line-height, 133%);
    letter-spacing: var(--amalitech-font-variant-caption-letter-spacing, normal)
}
.amalitech-font-variant-heading-6 {
    font-family: var(--amalitech-font-variant-heading-6-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-heading-6-size, 1rem);
    font-weight: var(--amalitech-font-variant-heading-6-weight, 700);
    line-height: var(--amalitech-font-variant-heading-6-line-height, 150%);
    letter-spacing: var(--amalitech-font-variant-heading-6-letter-spacing, normal)
}
.amalitech-font-variant-heading-5 {
    font-family: var(--amalitech-font-variant-heading-5-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-heading-5-size, 1.25rem);
    font-weight: var(--amalitech-font-variant-heading-5-weight, 800);
    line-height: var(--amalitech-font-variant-heading-5-line-height, 125%);
    letter-spacing: var(--amalitech-font-variant-heading-5-letter-spacing, normal)
}
.amalitech-font-variant-heading-4 {
    font-family: var(--amalitech-font-variant-heading-4-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-heading-4-size, 1.5rem);
    font-weight: var(--amalitech-font-variant-heading-4-weight, 800);
    line-height: var(--amalitech-font-variant-heading-4-line-height, 133%);
    letter-spacing: var(--amalitech-font-variant-heading-4-letter-spacing, normal)
}
.amalitech-font-variant-heading-3 {
    font-family: var(--amalitech-font-variant-heading-3-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-heading-3-size, 2rem);
    font-weight: var(--amalitech-font-variant-heading-3-weight, 800);
    line-height: var(--amalitech-font-variant-heading-3-line-height, 125%);
    letter-spacing: var(--amalitech-font-variant-heading-3-letter-spacing, normal)
}
.amalitech-font-variant-heading-2 {
    font-family: var(--amalitech-font-variant-heading-2-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-heading-2-size, 2.5rem);
    font-weight: var(--amalitech-font-variant-heading-2-weight, 800);
    line-height: var(--amalitech-font-variant-heading-2-line-height, 120%);
    letter-spacing: var(--amalitech-font-variant-heading-2-letter-spacing, normal)
}
.amalitech-font-variant-heading-1 {
    font-family: var(--amalitech-font-variant-heading-1-family, 'Work Sans', sans-serif);
    font-size: var(--amalitech-font-variant-heading-1-size, 3.5rem);
    font-weight: var(--amalitech-font-variant-heading-1-weight, 800);
    line-height: var(--amalitech-font-variant-heading-1-line-height, 114%);
    letter-spacing: var(--amalitech-font-variant-heading-1-letter-spacing, normal)
}

:host {
  /* ----------  Main Colors -------------- */
  --primary: var(--amalitech-color-primary);
  --secondary: var(--amalitech-color-secondary);
  --dark: var(--amalitech-color-dark);
  --light: var(--amalitech-color-light);
}

:root {
  /* ----------  Main Font -------------- */
  font-family: var(--amalitech-font-family-sans);
}
 /**
 * Colors
 */
/* Orange */
/* Neutral */
/* Light */
/* Green */
/* Yellow */
/* Red */
/* Blue */
/* Violet */
/* Teal */
/* Pink */
/**
 * Functions
 */
/**
 * Delivered variables
 */
/**
 * Breakpoints
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 * Mixins
 */
/**
 * Colors
 */
/* Orange */
/* Neutral */
/* Light */
/* Green */
/* Yellow */
/* Red */
/* Blue */
/* Violet */
/* Teal */
/* Pink */
/**
 * Functions
 */
/**
 * Delivered variables
 */
/**
 * Breakpoints
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 * Mixins
 */
/**
* Exposed css variables
*
* @prop --time-picker-color: The color of the time picker default is `#8f95b2`
* @prop --time-picker-dropdown-box-shadow: The box shadow of the time picker dropdown default is `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12)`
* @prop --time-picker-font-family: The font family of the time picker default is `Work Sans`
* @prop --time-picker-transition-duration: The transition duration of the time picker default is `0.3s`
* @prop --time-picker-bg-color: The background color of the time dropdown default is `#ffffff`
* @prop --time-picker-active-bg: The background color of the active time default is `#e47453`
* @prop --time-picker-active-color: The text color of the active time default is `#ffffff`
* @prop --time-picker-disabled-color: The text color of the disabled time default is `#8f95b2`
* @prop --time-picker-focus-color: The focus color of the time picker default is `#e47453`
* @prop --time-picker-panel-opacity: The opacity of the time picker panel default is `1`
* @prop --time-picker-footer-padding: The padding of the time picker footer default is `0.5rem 0.75rem`
* @prop --time-picker-footer-now-button-padding: The padding of the time picker footer now button default is `0.5rem 0.625rem`
* @prop --time-picker-footer-ok-button-padding: The padding of the time picker footer ok button default is `0.35rem 0.625rem`
* @prop --time-picker-footer-ok-button-br: The border radius of the time picker footer ok button default is `0.4125rem`
* @prop --time-picker-panel-display: The display of the time picker panel default is `flex`
*/
:host {
  display: block;
  font-family: var(--time-picker-font-family, var(--amalitech-font-family-sans));
  position: relative;
  font-weight: 500;
  color: var(--time-picker-color, var(--amalitech-color-neutral-400, #8f95b2));
}
:host button {
  font-weight: 500;
}

:host(:focus-visible) {
  outline-offset: var(--amalitech-spacing-1);
  outline: var(--amalitech-spacing-2) solid var(--amalitech-color-orange-300, #eb9c7f);
  transition: none;
  border-radius: 0.313rem;
}

* {
  transition: all var(--time-picker-transition-duration, 0.3s) ease-out;
}

p {
  margin: 0;
  padding: 0;
}

:host(.size-small) {
  font-size: var(--amalitech-font-size-12, 0.75rem);
  width: 6.25rem;
}
:host(.size-small) button:is(.hour, .minute, .second, .meridian) {
  font-size: 0.875rem;
}

:host(.size-small.seconds.meridian) {
  width: 7rem;
}

:host(.size-medium) {
  font-size: var(--amalitech-font-size-16, 1rem);
  width: 9.25rem;
}
:host(.size-medium) button:is(.hour, .minute, .second, .meridian) {
  font-size: 0.875rem;
}

:host(.size-medium.seconds.meridian) {
  width: 10rem;
}

:host(.size-large) {
  font-size: var(--amalitech-font-size-24, 1.5rem);
  width: 14rem;
}
:host(.size-large) button:is(.hour, .minute, .second, .meridian) {
  font-size: 1rem;
}

:host(.size-large.seconds.meridian) {
  width: 15rem;
}

.span {
  display: flex;
  justify-content: center;
  align-items: center;
  display: var(--time-picker-panel-display, flex);
  cursor: pointer;
  border-radius: 0.313rem;
  border: 1px solid var(--time-picker-color, var(--amalitech-color-neutral-400, #8f95b2));
  color: var(--time-picker-color, var(--amalitech-color-neutral-400, #8f95b2));
  opacity: var(--time-picker-panel-opacity, 1);
}
.span > div {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  min-width: 90%;
}
.span > div p {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.span.size-medium {
  padding: var(--amalitech-spacing-8) calc(var(--amalitech-spacing-8) * 2);
  font-size: var(--amalitech-font-size-16, 1rem);
}
.span.size-small {
  padding: calc(var(--amalitech-spacing-8) / 2) var(--amalitech-spacing-8);
  font-size: var(--amalitech-font-size-12, 0.75rem);
}
.span.size-large {
  padding: calc(var(--amalitech-spacing-8) * 2) calc(var(--amalitech-spacing-8) * 3);
  font-size: var(--amalitech-font-size-24, 1.5rem);
  gap: var(--amalitech-font-size-12, 0.75rem);
}
.span:focus {
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  border-color: var(--time-picker-focus-color, var(--amalitech-color-orange-300, #eb9c7f));
}
.span:hover {
  border-color: var(--time-picker-focus-color, var(--amalitech-color-orange-300, #eb9c7f));
}

main {
  display: grid;
  opacity: 0;
  grid-template-rows: 0fr;
  transition: all var(--time-picker-transition-duration, 0.3s) ease;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}
main.open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: all;
}

section {
  height: 12.5rem;
  background: var(--time-picker-bg-color, var(--amalitech-color-light, #ffffff));
  display: flex;
  justify-content: space-evenly;
  vertical-align: top;
  border-radius: 0.5rem;
  box-shadow: var(--time-picker-dropdown-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12));
  padding-bottom: 0.4375rem;
}
section summary {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
section summary::-webkit-scrollbar {
  width: 0.3125rem;
  height: 0.3125rem;
}
section summary::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, 0);
}
section summary::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 0.3125rem;
  display: none;
}
section summary:hover::-webkit-scrollbar-thumb {
  display: block;
}

button.minute,
button.hour,
button.second,
button.meridian {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3125rem 0;
  border-radius: 0.3125rem;
  color: var(--time-picker-color, var(--amalitech-color-secondary, --amalitech-color-neutral-600, #474d66));
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  font-family: var(--time-picker-font-family, var(--amalitech-font-family-sans));
  cursor: pointer;
}
button.minute.active,
button.hour.active,
button.second.active,
button.meridian.active {
  background: var(--time-picker-active-bg, var(--amalitech-color-orange-400, #e47453));
  color: var(--time-picker-active-color, var(--amalitech-color-light, #ffffff));
}
button.minute.disabled,
button.hour.disabled,
button.second.disabled,
button.meridian.disabled {
  cursor: not-allowed;
  color: var(--time-picker-disabled-color, var(--amalitech-color-neutral-400, #8f95b2));
}
button.minute:focus-visible,
button.hour:focus-visible,
button.second:focus-visible,
button.meridian:focus-visible {
  outline-offset: var(--amalitech-spacing-1);
  outline: var(--amalitech-spacing-2) solid var(--amalitech-color-orange-300, #eb9c7f);
  transition: none;
  width: 80%;
  margin-left: 10%;
}
button.minute:focus-visible:first-of-type,
button.hour:focus-visible:first-of-type,
button.second:focus-visible:first-of-type,
button.meridian:focus-visible:first-of-type {
  margin-top: 0.25rem;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--time-picker-bg-color, var(--amalitech-color-light, #ffffff));
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
  justify-content: space-between;
  margin-top: -0.4375rem;
  border-top: 1px solid var(--amalitech-color-neutral-100, #e6e8f0);
  padding: var(--time-picker-footer-padding, 0.5rem 0.75rem);
}
footer.size-small {
  padding: var(--time-picker-footer-padding, 0.25rem 0.5rem);
}
footer.size-small button {
  padding: var(--time-picker-footer-now-button-padding, 0.25rem 0.3125rem);
  border-radius: 0.123rem;
  font-size: var(--time-picker-footer-now-button-font-size, var(--amalitech-font-size-12, 0.75rem));
}
footer.size-medium {
  padding: var(--time-picker-footer-padding, 0.5rem 0.75rem);
}
footer.size-medium button {
  padding: var(--time-picker-footer-now-button-padding, 0.5rem 0.625rem);
  border-radius: 0.25rem;
  font-size: var(--time-picker-footer-now-button-font-size, var(--amalitech-font-size-16, 1rem));
}
footer.size-large {
  padding: var(--time-picker-footer-padding, 0.75rem 1rem);
}
footer.size-large button {
  padding: var(--time-picker-footer-now-button-padding, 0.75rem 0.9375rem);
  border-radius: 0.375rem;
  font-size: var(--time-picker-footer-now-button-font-size, var(--amalitech-font-size-24, 1.5rem));
}
footer button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--time-picker-active-bg, var(--amalitech-color-primary, --amalitech-color-orange-500, #dd5928));
  font-family: var(--time-picker-font-family, var(--amalitech-font-family-sans));
  background: none;
  border: none;
  cursor: pointer;
}
footer button:focus-visible {
  outline-offset: var(--amalitech-spacing-1);
  outline: var(--amalitech-spacing-2) solid var(--amalitech-color-orange-300, #eb9c7f);
  transition: none;
}
footer button:last-of-type {
  background: var(--time-picker-active-bg, var(--amalitech-color-primary, --amalitech-color-orange-500, #dd5928));
  color: var(--time-picker-active-color, var(--amalitech-color-light, #ffffff));
  border-radius: var(--time-picker-footer-ok-button-br, 0.4125rem);
  padding: var(--time-picker-footer-ok-button-padding, 0.35rem 0.625rem);
  border: none;
  cursor: pointer;
}

.required {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.required p {
  margin: 0.2rem;
  font-size: 0.8rem;
  background: var(--amalitech-color-red-200, #f9dada);
  padding: 0.1rem 0.2rem;
  border-radius: 0.25rem;
  color: var(--amalitech-color-red-500, #d14343);
  width: -moz-fit-content;
  width: fit-content;
}