@tailwind base;

@layer base {
  body {
    @apply font-basic font-regular text-base leading-normal text-neutral-900 /*break-all*/;
  }

  h1 {
    @apply text-3xl font-light leading-36;
  }

  h2 {
    @apply text-2xl font-regular leading-32;
  }

  h3 {
    @apply text-xl font-regular leading-loose;
  }

  h4 {
    @apply text-lg font-medium leading-relaxed;
  }

  h5 {
    @apply text-base font-regular leading-normal;
  }

  a {
    /* TODO https://gitlab.com/conrad-all/conrad-tds-dev/central-ui-library/-/issues/2 */
  }

  button {
    @apply text-base font-bold leading-normal;
  }

  hr {
    @apply border-t-2 border-b-none border-x-none border-neutral-400 shadow-none;
  }

  input[type="number"] {
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
      display: none;
    }

    appearance: textfield;
  }

  @screen notebook {
    h1 {
      @apply text-4xl font-light leading-44;
    }

    h2 {
      @apply text-3xl font-light leading-36;
    }
  }
}

@tailwind components;

@layer components {
  .ce-bg-transparent-extra-dark-grey {
    @apply bg-[#75747B]/10;
  }

  .ce-bg-transparent-white {
    @apply bg-special-dark-bg-hover;
  }

  .ce-bg-fade {
    @apply bg-special-bg-fade;
  }
}

@layer components {
  .ce-caption {
    @apply text-sm font-regular leading-none;
  }
}

@layer components {
	.ce-loading {
		@apply h-2 rounded w-full bg-neutral-400 overflow-hidden
		*:block *:h-full *:bg-primary-500
	}

	.ce-loading-indeterminate {
		@apply h-2 rounded w-full bg-neutral-400 overflow-hidden
		before:block before:h-full before:bg-primary-500
		before:content-[""] before:w-full before:animate-progress before:origin-left-right
	}
}

@layer components {
	.ce-form-field-desc {
		@apply mt-2 text-neutral-700 pr-16 flex items-center gap-4
		[&.ce-form-field-desc-error]:text-error-500 [&.ce-form-field-desc-error]:font-bold
	}

	.ce-form-field-desc-icon {
		@apply w-16 h-16 grow-0 shrink-0
		[&_svg]:max-w-full [&_svg]:max-h-full
	}

	.ce-form-field-desc-text {
		@apply grow ml-16 overflow-hidden text-ellipsis
		[.ce-form-field-desc-icon_+_&]:ml-0
	}

	.ce-form-field-desc-counter, .ce-form-field-desc-text {
		@apply text-sm leading-normal whitespace-nowrap
	}

	.ce-form-field-desc-counter {
		@apply grow-0 shrink-0
	}
}

@layer components {
  .ce-badge {
    @apply inline-flex flex-row items-center justify-center
	  rounded-16 font-bold text-base leading-normal h-24
	  py-0 px-10 text-neutral-900 bg-neutral-400 border-2 border-transparent;
  }

  .ce-badge-small {
    @apply ce-badge px-6 text-sm h-20
  }

  .ce-badge-blue {
    @apply bg-primary-500 text-neutral-50;
  }

  .ce-badge-blue-dark {
    @apply bg-primary-900 text-neutral-50;
  }

  .ce-badge-green {
    @apply bg-success-500 text-neutral-50;
  }

  .ce-badge-red {
    @apply bg-error-500 text-neutral-50;
  }

  .ce-badge-outline {
    @apply ce-badge text-neutral-600 bg-neutral-50 border-neutral-600
  }

  .ce-badge-blue-outline {
    @apply text-primary-500 bg-neutral-50 border-primary-500;
  }

  .ce-badge-blue-dark-outline {
    @apply text-primary-900 bg-neutral-50 border-primary-900;
  }

  .ce-badge-green-outline {
    @apply text-success-500 bg-neutral-50 border-success-500;
  }

  .ce-badge-red-outline {
    @apply text-error-500 bg-neutral-50 border-error-500;
  }
}

@layer components {
  .ce-breadcrumb {
    @apply flex items-center gap-4 text-nowrap overflow-y-auto text-sm
    	   [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] 
		   tablet:text-base;
  }

  .ce-breadcrumb-element {
	@apply hidden text-primary-500 font-bold
		   hover:underline
		 outline-primary-500 focus-visible:outline-1
		   tablet:inline
		   last-of-type:inline
		   peer-checked:inline
  }

  .ce-breadcrumb-always-expanded .ce-breadcrumb-element {
	@apply inline
  }

  .ce-breadcrumb-always-expanded .ce-breadcrumb-svg-arrow {
	@apply inline
  }

  .ce-breadcrumb svg {
    @apply w-16 h-16 min-w-16 min-h-16
		   tablet:inline tablet:w-24 tablet:h-24 tablet:min-w-24 tablet:min-h-24
  }

  .ce-breadcrumb-element-home {
	@apply text-primary-500 inline-flex items-center
  }

  .ce-breadcrumb-expander {
	@apply inline 
		   peer-checked:hidden 
		   tablet:hidden
  }

  .ce-breadcrumb-expander .ce-breadcrumb-element {
	@apply cursor-pointer
  }

  .ce-breadcrumb-toggle-input {
	@apply hidden
  }

  .ce-breadcrumb-svg-arrow {
    @apply text-neutral-500 hidden 
			 last-of-type:inline
			 peer-checked:inline 
  }
}

@layer components {
  .ce-button {
    @apply h-40 py-8 px-6 border-2 rounded-button border-solid font-bold text-base leading-normal transition-colors
      inline-flex flex-row items-center justify-center
      bg-accent-500 border-accent-500 text-neutral-900;
  }

  .ce-button span {
    @apply px-16 line-clamp-2 max-h-40 break-all;
  }

  .ce-button svg {
    @apply inline-block h-24 w-24 mx-8 flex-none;
  }

  .ce-button svg + span {
    @apply pl-0;
  }

  .ce-button span + svg {
    @apply -ml-8;
  }

  .ce-button svg:only-child {
    @apply mx-0;
  }

  .ce-button-full {
    @apply w-full;
  }

  .ce-button-full svg {
    @apply ml-0;
  }

  .ce-button-full span {
    @apply pr-0;
  }

  .ce-button:hover {
    @apply bg-accent-900 border-accent-900;
  }

  .ce-button:focus-visible {
    @apply outline outline-2 outline-primary-900 outline-offset-2;
  }

  .ce-button:disabled {
    @apply cursor-default bg-accent-300 border-accent-300 text-neutral-700;
  }

  /* Secondary */
  .ce-button.ce-button-secondary {
    @apply bg-primary-500 border-primary-500 text-neutral-50;
  }

  .ce-button.ce-button-secondary:hover {
    @apply bg-primary-700 border-primary-700;
  }

  .ce-button.ce-button-secondary:disabled {
    @apply bg-primary-400 border-primary-400 text-neutral-50;
  }

  /* Tertiary */
  .ce-button.ce-button-tertiary {
    @apply bg-transparent border-primary-700 text-primary-700;
  }

  .ce-button.ce-button-tertiary:hover {
    @apply bg-neutral-100;
  }

  .ce-button.ce-button-tertiary:disabled {
    @apply bg-transparent border-primary-400 text-primary-400;
  }

  /* Ghost */
  .ce-button.ce-button-ghost {
    @apply bg-transparent border-transparent text-primary-700;
  }

  .ce-button.ce-button-ghost:hover {
    @apply bg-neutral-100 border-transparent;
  }

  .ce-button.ce-button-ghost:disabled {
    @apply bg-transparent border-transparent text-primary-400;
  }

  /* Ghost special */
  .ce-button.ce-button-ghost-special {
    @apply bg-transparent border-transparent text-neutral-700;
  }

  .ce-button.ce-button-ghost-special:hover {
    @apply bg-neutral-100 border-transparent;
  }

  .ce-button.ce-button-ghost-special:disabled {
    @apply bg-transparent border-transparent text-neutral-500;
  }

  /* Ghost invert */
  .ce-button.ce-button-ghost-invert {
    @apply bg-transparent border-transparent text-neutral-50;
  }

  .ce-button.ce-button-ghost-invert:hover {
    @apply bg-special-dark-bg-hover border-transparent;
  }

  .ce-button.ce-button-ghost-invert:disabled {
    @apply bg-transparent border-transparent text-neutral-50/50;
  }
}

@layer components {
  .ce-status {
    @apply inline-flex flex-row items-center px-8 py-2 text-sm font-bold leading-normal rounded-10;
  }

  .ce-status span {
    @apply line-clamp-1;
  }

  .ce-status-positive {
    @apply bg-success-300 text-success-900;
  }

  .ce-status-intermediate {
    @apply bg-warning-300 text-warning-900;
  }

  .ce-status-negative {
    @apply bg-error-300 text-error-900;
  }

  .ce-status-link {
    @apply text-primary-700 bg-primary-300 hover:text-primary-900;
  }

  .ce-order-follow {
    @apply flex-none mr-4 w-14 h-14;
  }
}
@layer components {
	.ce-checkbox {
		@apply flex items-center relative;
	}

	.ce-checkbox:focus-visible {
		@apply ring-2 ring-neutral-700 ring-offset-2 rounded-[0.1875rem] outline-none;
	}

	.ce-checkbox:not(.ce-checkbox-state-disabled) {
		@apply cursor-pointer;
	}

	.ce-checkbox input {
		@apply absolute top-0 left-0 w-0 h-0 opacity-0;
	}

	.ce-checkbox .ce-checkbox-bodytext {
		@apply ml-8;
	}

	.ce-checkbox .ce-checkbox-icon-container {
		@apply relative border-solid border-2 border-neutral-700 h-20 w-20 min-w-20 min-h-20 rounded-[0.1875rem] flex-none flex items-center justify-center;
	}

	.ce-checkbox .ce-checkbox-icon {
		@apply w-16 h-16;
	}

	.ce-checkbox:not(
  .ce-checkbox-state-disabled, .ce-checkbox-state-checked, .ce-checkbox-state-error) .ce-checkbox-icon-container {
		@apply hover:bg-neutral-100 transition-[bg_0.1s];
	}

	.ce-checkbox:not(.ce-checkbox-state-disabled) .ce-checkbox-icon-container {
		@apply before:hover:outline before:absolute before:h-20 before:w-20 before:content-[""] before:-z-10
		before:rounded-full before:outline-neutral-300 before:outline-8 before:transition-[outline_0.1s]
		before:-top-2 before:-left-2;
	}

	.ce-checkbox.ce-checkbox-state-disabled .ce-checkbox-icon-container {
		@apply border-neutral-500;
	}

	.ce-checkbox.ce-checkbox-state-disabled .ce-checkbox-bodytext {
		@apply text-neutral-600;
	}

	.ce-checkbox.ce-checkbox-state-checked .ce-checkbox-icon-container {
		@apply bg-primary-500 border-primary-500 text-neutral-50;
	}

	.ce-checkbox.ce-checkbox-state-checked.ce-checkbox-state-disabled .ce-checkbox-icon-container {
		@apply bg-primary-400 border-primary-400 text-neutral-50;
	}

	.ce-checkbox.ce-checkbox-state-error .ce-checkbox-icon-container {
		@apply bg-error-300 border-error-500;
	}

	.ce-checkbox.ce-checkbox-state-error .ce-checkbox-bodytext {
		@apply text-error-500;
	}
}

@layer components {
  .ce-textlink {
    @apply items-center box-border inline-flex
      overflow-hidden text-base font-bold text-primary-700

	  hover:underline
      active:no-underline active:text-primary-900

      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-900 focus-visible:ring-offset-2 focus-visible:rounded-[0.125rem];
  }

  .ce-textlink svg {
    @apply w-20 h-20 mr-6;
  }

  .ce-textlink-caption {
    @apply text-sm font-bold leading-[1rem];
  }
}

@layer components {
  .ce-formfield-input {
    @apply relative;
  }

  .ce-formfield-input-element {
    @apply text-base text-neutral-900
      rounded outline-none w-full
	  pt-20 pb-8 px-16
      [&_textarea]:h-auto [&_textarea]:min-h-[5rem] [&_input]:h-48
	  shadow-input focus:shadow-input-focus
	;
  }

  .ce-formfield-input-element:has(~ .ce-formfield-input-icon) {
	  @apply pr-36
  }

  .ce-formfield-input-element:has(~ .ce-formfield-icon-slot) {
	  @apply pr-[6.25rem]
  }

  .ce-formfield-input-element:has(~ .ce-formfield-icon-slot:only-of-type) {
	@apply pr-48
  }

  .ce-formfield-input-element:hover {
	  background-image: linear-gradient(theme('colors.neutral.100'), theme('colors.neutral.100')),
	  			  linear-gradient(theme('colors.neutral.50'), theme('colors.neutral.50'));
  }

  .ce-formfield-input-icon {
    @apply absolute
		top-14 right-14
		h-20 w-20
		text-primary-500;
  }

	.ce-formfield-input-placeholder {
		@apply absolute truncate
		leading-none [.ce-formfield-input-element:read-write:focus_~_&]:leading-normal
		top-16 [.ce-formfield-input-element:read-write:focus_~_&]:top-4 left-16
		[.ce-formfield-input-element:read-write:focus_~_&]:text-sm

		[.ce-formfield-input-element:focus_~_&]:text-primary-500

		[.ce-formfield-state-error_.ce-formfield-input-element:focus_+_&]:text-error-500
		[.ce-formfield-state-error_.ce-formfield-input-element:not(:placeholder-shown)_+_&]:text-error-500
		[.ce-formfield-state-error_.ce-formfield-input-element:focus_+_&]:font-bold
		[.ce-formfield-state-error_.ce-formfield-input-element:not(:placeholder-shown)_+_&]:font-bold

		max-w-[calc(100%_-2rem)]
		has-[+_.ce-formfield-input-icon]:max-w-[calc(100%_-3.25rem)]
		has-[+_.ce-formfield-icon-slot:only-of-type]:max-w-[calc(100%_-4rem)]
		has-[+_.ce-formfield-icon-slot]:max-w-[calc(100%_-6.75rem)]

		transition-all duration-200
		pointer-events-none;
	}

  .ce-formfield-icon-slot {
    @apply absolute transition-position
		top-4
		right-4 has-[+_.ce-formfield-icon-slot]:right-48;
  }

  .ce-formfield-input-element:not(:placeholder-shown) + .ce-formfield-input-placeholder {
    @apply top-4 text-sm leading-normal;
  }

  .ce-formfield-info {
    @apply flex justify-end flex-row flex-nowrap items-center
		text-sm leading-[1rem] pointer-events-none
		px-16 [.ce-formfield-state-error_&]:pl-0
		mt-2
		text-neutral-700 [.ce-formfield-state-error_&]:text-error-500;
  }

  .ce-formfield-info-helper {
    @apply flex-grow flex-shrink text-ellipsis whitespace-nowrap overflow-hidden pr-16;
  }

  .ce-formfield-info-helper-icon {
    @apply flex-grow-0 flex-shrink-0 w-16 h-16 mr-4 text-error-500
		hidden [.ce-formfield-state-error_&]:block;
  }

  .ce-formfield-info-counter {
    @apply flex-grow-0 flex-shrink-0;
  }

  .ce-formfield-state-disabled .ce-formfield-input-element {
    @apply border-neutral-300 pointer-events-none text-neutral-600;
  }

  .ce-formfield-state-disabled .ce-formfield-input-placeholder {
    @apply text-neutral-600;
  }

  .ce-formfield-state-error .ce-formfield-input-element {
    @apply shadow-input-error
  }
}

@layer components {
	.ce-localalert {
		@apply flex flex-col gap-14 py-12 px-16 font-regular text-base rounded-4
		bg-primary-300 text-primary-900
		[&.ce-localalert-state-success]:bg-success-300 [&.ce-localalert-state-success]:text-success-900
		[&.ce-localalert-state-error]:bg-error-300 [&.ce-localalert-state-error]:text-error-900
		[&.ce-localalert-state-warning]:bg-warning-300 [&.ce-localalert-state-warning]:text-warning-900
	}

	.ce-localalert-info {
		@apply flex pl-40
			flex-row
			gap-12 tablet:gap-16
			flex-wrap items-center
	}

	.ce-localalert-info-text {
		@apply relative flex-[1_1_50%];
	}

	.ce-localalert-info-text > svg {
		@apply absolute -left-40 top-1/2 -translate-y-1/2
		w-24 h-24
		text-primary-500
		[.ce-localalert-state-success_&]:text-success-900
		[.ce-localalert-state-error_&]:text-error-900
		[.ce-localalert-state-warning_&]:text-warning-900
	}

	.ce-localalert-info-text-title {
		@apply has-[~_.ce-localalert-info-text-description]:text-lg
			has-[~_.ce-localalert-info-text-description]:font-medium;
	}

	.ce-localalert-action {
		@apply flex-none [&_.ce-button]:text-inherit
	}

	.ce-localalert-alternativecontent {
		@apply ml-40 text-neutral-900
	}
}

@layer components {
    .ce-rounded-box {
        @apply rounded border border-neutral-400 hover:border-transparent hover:shadow select-none p-6 outline-neutral-700;
    }

    .ce-rounded-box-active {
        @apply bg-primary-300 border-primary-300 active:border-neutral-400 active:bg-inherit focus-visible:border-neutral-700 outline-neutral-700;
    }

    .ce-rounded-box-disabled {
        @apply hover:shadow-none cursor-auto active:bg-neutral-50 active:border-neutral-400 hover:border-neutral-400;
    }

    .ce-rounded-box-clickable {
        @apply active:bg-primary-300 active:border-primary-300 cursor-pointer outline-neutral-700
			focus-visible:outline-2 focus-visible:outline-primary-900
		;
    }
}

@layer components {
  /* Background fade */
  .ce-flyin-right-background-fade {
    @apply fixed inset-0 ce-bg-fade;
  }

  /* Top-level right side class */
  .ce-flyin-right {
    @apply bg-neutral-50 absolute w-[20rem] inset-y-0 right-0 flex flex-col rounded-l-[0.5rem] shadow p-16;
  }

  @screen notebook {
    .ce-flyin-right {
      @apply w-[40rem] p-24;
    }
  }

  /* Header and top-controls */
  .ce-flyin-right-header {
    @apply flex items-center mb-16;
  }

  .ce-flyin-right-header .ce-flyin-title-container {
    @apply grow truncate mr-8;
  }

  .ce-flyin-right-header .ce-flyin-title-container:not(:first-child) {
    @apply ml-8;
  }

  .ce-flyin-right-header .ce-flyin-title-container .ce-flyin-title {
    @apply leading-normal truncate;
  }

  .ce-flyin-right-header .ce-flyin-title-container .ce-flyin-subtitle {
    @apply text-sm text-neutral-700 truncate;
  }

  .ce-flyin-right-header .ce-button:last-child {
    @apply justify-self-end;
  }

  /* Body */
  .ce-flyin-right .ce-flyin-right-content {
    @apply grow overflow-auto;
  }

  /* Footer */
  .ce-flyin-right .ce-flyin-right-footer {
    @apply mt-16;
  }

  .ce-flyin-right .ce-flyin-right-footer.ce-flyin-right-button-footer {
    @apply flex justify-between;
  }

  .ce-flyin-right .ce-flyin-right-footer.ce-flyin-right-button-footer > .ce-button {
    @apply grow;
  }

  .ce-flyin-right .ce-flyin-right-footer.ce-flyin-right-button-footer > .ce-button:not(:first-child) {
    @apply ml-16;
  }
}

@layer components {
  .ce-global-alert {
    @apply bg-primary-900 text-neutral-50 rounded flex flex-col border border-neutral-50;
  }

  .ce-global-alert.ce-global-alert-state-error {
    @apply bg-error-900;
  }

  .ce-global-alert.ce-global-alert-state-success {
    @apply bg-success-900;
  }

  .ce-global-alert .ce-global-alert-content {
    @apply ml-16 my-14 mr-12;
  }

  /* action button adjustments */
  .ce-global-alert .ce-button {
    @apply flex-none self-end my-4 mr-8 text-primary-400;
  }

  .ce-global-alert.ce-global-alert-state-error .ce-button {
    @apply text-error-300;
  }

  .ce-global-alert.ce-global-alert-state-success .ce-button {
    @apply text-success-300;
  }

  .ce-global-alert .ce-button:hover {
    @apply bg-special-dark-bg-hover;
  }

  .ce-global-alert .ce-button:focus-visible {
    @apply outline-neutral-50;
  }

  .ce-global-alert .ce-global-alert-content ~ .ce-button {
    @apply -mt-12;
  }

  @screen tablet {
    .ce-global-alert {
      @apply flex-row justify-between items-center;
    }

    .ce-global-alert .ce-button {
      @apply self-center;
    }

    .ce-global-alert .ce-global-alert-content ~ .ce-button {
      @apply mt-4;
    }
  }
}

@layer components {
  .ce-tooltip {
    @apply relative flex bg-neutral-300 px-20 py-16 shadow z-[99];
  }

  .ce-tooltip-desktop {
    @apply max-w-[23.75rem] rounded;
  }

  .ce-tooltip-arrow {
    @apply absolute content-[""] w-0 h-0 rotate-[45deg] top-[-0.6rem]
      border-t-neutral-300 border-r-transparent border-b-transparent border-l-neutral-300
      border-[0.8em] border-neutral-900 shadow-[-2px_-2px_2px_0_rgba(0,0,0,0.05)];
  }

  .ce-tooltip-mobile-wrapper {
    @apply fixed left-0 bottom-0 w-screen;
  }

  .ce-tooltip-mobile {
    @apply bg-neutral-50 w-screen rounded-t;
  }

  .ce-tooltip-close {
    @apply relative float-right z-[99];
  }

  .ce-tooltip-close .ce-button {
    @apply text-neutral-50 hover:bg-special-dark-bg-hover;
  }

  .ce-tooltip-background {
    @apply bg-neutral-700/40 w-screen h-screen absolute top-0 right-0 z-[97];
  }
}

@layer components {
  .ce-radiobutton {
    @apply inline-flex items-center  relative;
  }

  .ce-radiobutton:not(.ce-radiobutton-state-disabled) {
    @apply cursor-pointer;
  }

  .ce-radiobutton input {
    @apply absolute top-0 left-0 w-0 h-0 opacity-0;
  }

  .ce-radiobutton .ce-radiobutton-text {
    @apply ml-8;
  }

  .ce-radiobutton .ce-radiobutton-icon {
    @apply relative border-solid border-2 border-neutral-700 h-20 w-20 min-w-20 rounded-full flex-none;
  }

  .ce-radiobutton:not(
  .ce-radiobutton-state-disabled, .ce-radiobutton-state-checked, .ce-radiobutton-state-error) .ce-radiobutton-icon {
    @apply hover:bg-neutral-100 transition-[bg_0.1s];
  }

  .ce-radiobutton:focus-visible {
    @apply outline-none ring-2 ring-primary-900 ring-offset-2 rounded-[0.125rem];
  }

  .ce-radiobutton:not(.ce-radiobutton-state-disabled) .ce-radiobutton-icon {
    @apply before:hover:outline before:absolute before:h-18 before:w-18 before:content-[""] before:-z-10 before:m-[-1px]
      before:rounded-full before:outline-neutral-300 before:outline-8 before:transition-[outline_0.1s];
  }

  .ce-radiobutton.ce-radiobutton-state-disabled .ce-radiobutton-icon {
    @apply border-neutral-500;
  }

  .ce-radiobutton.ce-radiobutton-state-disabled .ce-radiobutton-text {
    @apply text-neutral-700;
  }

  .ce-radiobutton.ce-radiobutton-state-checked .ce-radiobutton-icon {
    @apply bg-primary-500 border-primary-500 text-neutral-50
      after:absolute after:content-[""] after:rounded-full after:h-16 after:w-16
      after:border-neutral-50 after:border-2 after:border-solid;
  }

  .ce-radiobutton.ce-radiobutton-state-checked.ce-radiobutton-state-disabled .ce-radiobutton-icon {
    @apply bg-primary-400 border-primary-400 text-neutral-50;
  }

  .ce-radiobutton.ce-radiobutton-state-error .ce-radiobutton-icon {
    @apply bg-error-300 border-error-500;
  }

  .ce-radiobutton.ce-radiobutton-state-error.ce-radiobutton-state-checked .ce-radiobutton-icon {
    @apply bg-error-500;
  }

  .ce-radiobutton.ce-radiobutton-state-error .ce-radiobutton-text {
    @apply text-error-500;
  }
}

@layer components {
  .ce-recoproduct {
    @apply w-[176px] py-8 px-[calc(theme(spacing.8)-1px)] grid auto-rows-auto
      grid-rows-[[top-section]_160px_[data-table]_16px_[title]_32px_[seller]_22px_[availability]_26px_[original-price]_22px_[price]_20px_[vat-info]_auto_[action-button]_auto]
      tablet:w-[216px] tablet:px-12
      tablet:grid-rows-[[top-section]_160px_[data-table]_16px_[title]_60px_[seller]_22px_[availability]_26px_[original-price]_22px_[price]_20px_[vat-info]_auto_[action-button]_auto]
  }

  .ce-recoproduct-topsection {
    @apply row-start-[top-section] col-span-2 relative flex justify-center
  }

  .ce-recoproduct-label {
    @apply absolute top-0 left-0
  }

  .ce-recoproduct-eel {
    @apply absolute bottom-0 left-0
  }

  .ce-recoproduct-image {
    @apply w-[160px] h-[160px] bg-neutral-300
  }

  .ce-recoproduct-technicaltable {
    @apply col-span-2 row-start-[data-table] justify-start text-primary-500
  }

  .ce-recoproduct-title {
    @apply col-span-2 row-start-[title] h-32 line-clamp-2 text-sm font-medium
      tablet:h-60 tablet:text-base tablet:line-clamp-3 tablet:font-regular break-all
  }

  .ce-recoproduct-seller {
    @apply col-span-2 row-start-[seller] text-sm text-primary-500 mt-6
  }

  .ce-recoproduct-availability {
    @apply col-span-2 row-start-[availability] h-20 flex mt-6
  }

  .ce-recoproduct-originalprice {
    @apply col-span-2 row-start-[original-price] text-right line-through text-neutral-600 text-sm mt-6
  }

  .ce-recoproduct-unitprice {
    @apply row-start-[price] col-start-1 text-sm text-neutral-600 flex items-center
  }

  .ce-recoproduct-price {
    @apply row-start-[price] col-start-2 text-base text-error-500 font-bold flex items-center justify-end
  }

  .ce-recoproduct-vatinfo {
    @apply col-span-2 row-start-[vat-info] pt-4 text-sm items-end text-neutral-600 flex flex-col gap-4 text-right
  }

  .ce-recoproduct-addtocart {
    @apply col-span-2 row-start-[action-button] mt-4
  }
}

@layer components {
	.ce-dropdown {
		@apply relative;
	}

	.ce-dropdown .ce-formfield-input-element:read-only:hover {
		@apply cursor-pointer;
	}

	.ce-formfield-dropdown-options {
		@apply flex-col items-center justify-center
			py-4 bg-neutral-50 shadow-Options rounded-4
			z-10 w-full
			absolute left-0
			max-h-[9.25rem] overflow-y-scroll
			[&:not(.ce-formfield-dropdown-options-align-top)]:top-[3.125rem]
			[&.ce-formfield-dropdown-options-align-top]:bottom-[3.125rem]
			[&.ce-formfield-dropdown-options-align-top:has(~_.ce-formfield-info)]:bottom-[4.25rem]
		;
	}

	.ce-formfield-dropdown-option {
		@apply cursor-pointer block hover:bg-neutral-100 leading-[1.25] py-4 px-16;
	}

	.ce-dropdown .ce-formfield-input-icon {
		@apply pointer-events-none text-neutral-700;
	}

	.ce-dropdown.ce-formfield-state-error .ce-formfield-input-icon {
		@apply text-error-500;
	}

	.ce-dropdown.ce-formfield-state-disabled .ce-formfield-input-icon {
		@apply text-neutral-600;
	}
}

@layer components {
    .ce-radio-button-tile {
        @apply p-16 flex flex-col ce-rounded-box
                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-2 focus-visible:rounded-[0.125rem];
    }

    .ce-radio-button-tile-checked {
        @apply ce-rounded-box-active;
    }

    .ce-radio-button-tile-disabled {
        @apply ce-rounded-box-disabled;
    }

    .ce-radio-button-tile-header {
        @apply flex justify-between w-full;
    }

    .ce-radio-button-tile-radio-button-container {
        @apply flex-1 flex flex-col break-all;
    }

    .ce-radio-button-tile-radio-button {
        @apply flex;
    }

    .ce-radio-button-tile-actions {
        @apply flex;
    }

    .ce-radio-button-tile-disabled .ce-radio-button-tile-content {
        @apply text-neutral-700;
    }

    .ce-radio-button-tile-content {
        @apply pl-24 mt-8 text-base break-all;
    }

    .ce-radio-button-tile-explanation-text {
        @apply text-sm;
    }

    .ce-check-box-tile {
        @apply p-16 flex flex-col ce-rounded-box
        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-2 focus-visible:rounded-[0.125rem];
    }

    .ce-check-box-tile-checked {
        @apply ce-rounded-box-active;
    }

    .ce-check-box-tile-disabled {
        @apply ce-rounded-box-disabled;
    }

    .ce-check-box-tile-header {
        @apply flex flex-col w-full font-bold text-lg;
    }

    .ce-check-box-tile-description-list {
        @apply flex flex-col w-full mt-12 pl-28;
    }

    .ce-check-box-tile-description-text {
        @apply ml-8 font-regular text-base;
    }

    .ce-check-box-tile-description-item {
        @apply flex;
    }

    .ce-check-box-tile-description-item:not(:last-child) {
        @apply mb-8;
    }

    .ce-check-box-tile-description-icon {
        @apply w-20 h-20 text-primary-500;
    }

    .ce-check-box-tile-check-box-container {
        @apply flex-1 flex flex-col break-all;
    }

    .ce-check-box-tile-check-box {
        @apply flex;
    }

    .ce-check-box-tile-disabled .ce-check-box-tile-content {
        @apply text-neutral-700;
    }

    .ce-check-box-tile-content {
        @apply pl-28 mt-24 text-base break-all;
    }


    .ce-content-tile {
        @apply border rounded border-neutral-400;
    }

    .ce-content-tile-header {
        @apply rounded bg-neutral-100 flex flex-row justify-between items-center focus-visible:border-primary-900 outline-primary-900;
    }

    .ce-content-tile-header > .ce-content-tile-header-title {
        @apply text-lg font-medium py-12 px-16 truncate;
    }

    .ce-content-tile-header > .ce-content-tile-header-action {
        @apply flex flex-col items-center py-6 pr-16;
    }

    .ce-content-tile-content {
        @apply px-16 py-12;
    }
}

@layer components {
    .ce-switch {
        @apply inline-flex items-center gap-8 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary-900
        has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:rounded-[0.125rem];
    }

    .ce-switch:not(.ce-switch-state-disabled) {
        @apply cursor-pointer;
    }

    .ce-switch input {
        @apply absolute top-0 left-0 w-0 h-0 opacity-0
    }

    .ce-switch .ce-toggle {
        @apply flex-shrink-0 relative p-2 inline-block w-40 h-20 rounded-16 after:absolute
        after:content-[""] after:h-16 after:w-16 after:bg-neutral-50 after:rounded-full after:transition-all;
    }

    .ce-switch:not(.ce-switch-state-disabled) .ce-toggle {
        @apply before:hover:outline before:absolute before:h-18 before:w-36 before:content-[""] before:-z-10
        before:m-[-1px] before:rounded-full before:outline-neutral-100 before:outline-8 before:transition-[outline_0.1s];
    }

    .ce-switch.ce-switch-state-unchecked .ce-toggle {
        @apply bg-neutral-600;
    }

    .ce-switch.ce-switch-state-checked .ce-toggle {
        @apply bg-primary-500;
    }

    .ce-switch.ce-switch-state-checked .ce-toggle::after {
        @apply translate-x-20;
    }

    .ce-switch.ce-switch-state-unchecked .ce-toggle::after {
        @apply translate-x-0;
    }

    .ce-switch.ce-switch-state-disabled .ce-toggle{
        @apply bg-neutral-400;
    }

    .ce-switch.ce-switch-state-disabled.ce-switch-state-checked .ce-toggle{
        @apply bg-primary-400;
    }

    .ce-switch.ce-switch-state-error .ce-toggle{
        @apply bg-error-500;
    }

    .ce-switch.ce-switch-state-error.ce-switch-state-disabled .ce-toggle{
        @apply bg-error-300;
    }

    .ce-switch.ce-switch-state-error .ce-switch-text{
        @apply text-error-500;
    }
}

@layer components {
    .ce-table-container {
        @apply overflow-x-auto;
    }

    .ce-table {
        @apply min-w-full text-left overflow-y-auto;
    }

    .ce-table thead {
        @apply bg-primary-300;
    }

    .ce-table:not(.single-column) thead {
        @apply border-b border-solid border-primary-500;
    }

    .ce-table th {
        @apply text-nowrap font-medium text-lg py-12 px-16;
    }

    .ce-table:not(.single-column) thead th {
        @apply font-bold text-sm;
    }

    .ce-table th:first-child {
        @apply rounded-tl-4;
    }

    .ce-table th:last-child {
        @apply rounded-tr-4;
    }

    .ce-table.single-column th:first-child {
        @apply rounded-l-4;
    }

    .ce-table.single-column th:last-child {
        @apply rounded-r-4;
    }

    .ce-table .ce-table-header {
        @apply flex items-center gap-8;
    }

    .ce-table .ce-table-header.ce-sortable {
        @apply cursor-pointer;
    }

    .ce-table .ce-table-icon {
        @apply border-transparent w-24 h-24 cursor-pointer;
    }

    .ce-table .ce-table-header .ce-table-icon.sorting-icon {
        @apply invisible text-primary-500;
    }

    .ce-table .ce-table-header:hover .ce-table-icon.sorting-icon,
    .ce-table .ce-table-header.ce-sorted .ce-table-icon.sorting-icon {
        @apply visible;
    }

    .ce-table tbody tr {
        @apply border-b border-solid border-neutral-400 hover:bg-neutral-100;
    }

    .ce-table tbody tr.ce-clickable-row {
        @apply cursor-pointer;
    }

    .ce-table tbody tr td {
        @apply py-12 px-16;
    }

    .ce-table .ce-table-data {
        @apply flex items-center justify-between gap-8;
    }

    .ce-table .ce-table-actions {
        @apply flex items-center justify-end gap-8;
    }

    .ce-table .ce-table-actions .ce-table-icon.action-icon {
        @apply text-neutral-600;
    }
}

@layer components {
	/* Note: border-width = (spinnerSize / 10) / 16 */
	.ce-spinner {
		@apply inline-block w-64 h-64 rounded-[50%] animate-spinner border-[0.4rem] border-primary-500
	}

	.ce-spinner-xs {
		@apply ce-spinner w-20 h-20 border-2
	}
}

@layer components {
	.ce-file-input {
		@apply relative
		box-border border border-neutral-500 rounded
		px-[calc(theme(spacing[16])-theme(borderWidth.DEFAULT))]
	}

	.ce-file-input-error {
		@apply border-error-500 border-2
		px-[calc(theme(spacing[16])-theme(borderWidth[2]))]
	}

	.ce-file-input-action-row {
		@apply flex flex-row items-center gap-16
		py-[calc(theme(spacing[12])-theme(borderWidth.DEFAULT))]
		[.ce-file-input-error_&]:pt-[calc(theme(spacing[12])-theme(borderWidth[2]))]
	}

	.ce-file-input input {
		@apply absolute top-0 left-0 w-0 h-0 opacity-0
	}

	.ce-file-input-icon {
		@apply w-24 h-24 grow-0 text-primary-500
	}

	.ce-file-input-icon svg {
		@apply max-w-full max-h-full
	}

	.ce-file-input-title {
		@apply grow
	}

	.ce-file-input-title-text {
		@apply text-base font-regular leading-normal
	}

	.ce-file-input-title-subtext {
		@apply text-neutral-700 text-sm font-regular leading-normal
	}

	.ce-file-input-action {
		@apply grow-0
	}

	.ce-file-input-entry {
		@apply flex flex-row items-center gap-12
		       pt-2 pb-4 border-b border-neutral-400
			   last:border-none last:pb-0
		       last:mb-[calc(theme(spacing[12])-theme(borderWidth.DEFAULT))]
		       [.ce-file-input-error_&]:last:mb-[calc(theme(spacing[12])-theme(borderWidth[2]))]
	}

	.ce-file-input-entry-icon {
		@apply w-20 h-20 grow-0 text-primary-500
		[.ce-file-input-error_&]:text-error-500
	}

	.ce-file-input-entry-icon svg {
		@apply max-w-full max-h-full
	}

	.ce-file-input-entry-title {
		@apply grow text-neutral-700 text-sm font-regular leading-normal
	}

	.ce-file-input-entry-title-subtext {
		@apply font-bold
		[.ce-file-input-error_&]:text-error-500
	}

	.ce-file-input-entry-loading {
		@apply grow
	}
}

@layer components {
    .ce-tabs {
        @apply flex items-center gap-16;
    }

    .ce-tabs-scroll-container {
        @apply overflow-y-auto -mb-32 pb-32 [clip-path:inset(0_0_2rem)];
    }

    .ce-tabs-scroll-content {
        @apply table border rounded-full border-neutral-500;
    }

    .ce-tabs-container {
        @apply flex gap-12 p-4;
    }

    .ce-tabs-container .ce-tab {
        @apply flex items-center gap-6 h-40 py-8 px-16 font-bold rounded-full text-nowrap;
    }

    .ce-tabs-container .ce-tab:not(.ce-tab-state-disabled) {
        @apply hover:bg-neutral-100 py-8 px-16 font-bold rounded-full
        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-2 focus-visible:rounded-full;
    }

    .ce-tabs-container .ce-tab.ce-tab-state-active:not(.ce-tab-state-disabled) {
        @apply text-primary-500 border-2 border-primary-500 rounded-full;
    }

    .ce-tabs-container .ce-tab.ce-tab-state-disabled {
        @apply text-neutral-500 cursor-default focus:outline-none;
    }

    .ce-tabs-container .ce-tab .ce-tab-status {
        @apply h-24 w-24;
    }

    .ce-tabs-container .ce-tab .ce-tab-status.ce-tab-status-success {
        @apply text-success-500;
    }

    .ce-tabs-container .ce-tab .ce-tab-status.ce-tab-status-warning {
        @apply text-warning-500;
    }
}

@layer components {
	.ce-accordion {
		@apply border border-neutral-500 rounded-4
	}

	.ce-accordion-selection-not-clickable {
		@apply px-16 py-12 transition-colors
	}

	.ce-accordion-selection {
		@apply ce-accordion-selection-not-clickable
		hover:ce-bg-transparent-extra-dark-grey hover:cursor-pointer
		focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-700 focus-visible:ring-offset-2 focus-visible:rounded-[0.125rem];
	}

	.ce-accordion-selection-disabled {
		@apply text-neutral-600
	}

	.ce-accordion-selection-active {
		@apply text-neutral-50 bg-primary-500
		[&_.ce-accordion-selection-icon]:text-neutral-50
	}

	.ce-accordion-selection-inner {
		@apply flex flex-row justify-between items-center
			rounded-4 outline-offset-8 outline-primary-900 outline outline-0
			[&_.ce-button]:-my-8
	}

	.ce-accordion-selection-text {
		@apply font-medium text-lg select-none
	}

	.ce-accordion-selection-icon {
		@apply text-primary-500 w-24 h-24
			[&_svg]:max-w-full [&_svg]:max-h-full
	}

	.ce-accordion-content {
		@apply mt-8 pb-12 px-16
	}
}

@layer components {
    .ce-number-input {
        @apply w-[10rem]
    }

    .ce-number-input-field {
        @apply ce-formfield-input;
    }

    .ce-number-input-element {
        @apply ce-formfield-input-element text-center px-48 font-bold
    }

    .ce-number-input-placeholder {
        @apply absolute left-0 top-4 text-sm text-center w-full text-neutral-700;
    }

    .ce-number-input-field > .ce-number-input-plus {
        @apply absolute top-4 right-4;
    }

    .ce-number-input-field > .ce-number-input-minus {
        @apply absolute top-4 left-4;
    }

    .ce-number-input-info {
        @apply ce-formfield-info px-0
    }

    .ce-number-input-info-helper {
        @apply ce-formfield-info-helper px-8
    }

    .ce-number-input-info-multiple {
        @apply ce-formfield-info-counter px-8;
    }

    .ce-number-input-info-helper-icon {
        @apply ce-formfield-info-helper-icon;
    }

    .ce-number-input-state-error .ce-number-input-info-helper-icon {
        @apply block;
    }

    .ce-number-input-state-error .ce-number-input-info {
        @apply text-error-500;
    }

    .ce-number-input-state-error .ce-number-input-info-helper {
        @apply pl-4;
    }

    .ce-number-input-state-error .ce-number-input-element {
        @apply shadow-input-error pt-20 px-16 pb-8
    }

    .ce-number-input-state-disabled:not(.ce-number-input-state-error) .ce-number-input-info{
        @apply text-neutral-500;
    }

    .ce-number-input-state-disabled .ce-number-input-placeholder {
        @apply text-neutral-600;
    }

    .ce-number-input-state-disabled .ce-number-input-element {
        @apply bg-neutral-50 text-neutral-600;
    }

    .ce-number-input-state-disabled:not(.ce-number-input-state-error) .ce-number-input-element {
        @apply border-neutral-400;
    }
}

@layer components {
  .ce-pagination {
    @apply relative flex justify-center gap-8;
  }

  .ce-pagination-item {
    @apply relative rounded-button border-2 border-solid border-transparent
      text-neutral-700 h-40 w-40 m-0 p-0 bg-neutral-50 items-center justify-center
      no-underline inline-flex flex-shrink-0 flex-grow-0 font-bold cursor-pointer
      transition-colors select-none;
  }

  .ce-pagination-item.selected {
    @apply border-primary-500 text-primary-500;
  }

  .ce-pagination-item.pagination-button {
    @apply w-fit h-36 m-0 px-4 py-0 items-center
      justify-center inline-flex rounded-full border-2 border-solid
      border-transparent text-primary-500 bg-neutral-50 no-underline font-bold
      cursor-pointer;
  }

  .ce-pagination-item:not(.selected):hover {
    @apply ce-bg-transparent-extra-dark-grey;
  }

  .ce-pagination-item.selected:hover {
    @apply cursor-default;
  }

  .ce-pagination-item.pagination-button svg {
    @apply fill-primary-500 stroke-primary-500;
  }

  /* Disabled states */
  .ce-pagination-item.pagination-button.disabled {
    @apply text-primary-400 pointer-events-none cursor-auto;
  }

  .ce-pagination-item.pagination-button.disabled svg {
    @apply fill-primary-400 stroke-primary-400;
  }
}

@layer components {
  .page-picker {
    /*
    In components implementing this design, placement of a pagePicker
    should be dynamic:  Zero, one, or two page-range selectors ("'dots'
    blocks" in the Search SPA) may be present.  The `left` and `bottom` values should be
    overridden with a `style` attribute that relates to the position
    of the "dots" block in the parent Pagination that the user clicked
    to bring up this page-picker.
    */
    @apply absolute bottom-44 z-10 p-0 min-w-56 max-w-66;

    box-shadow: 1px 2px 6px 0 #0000001A;
    container: jump-picker / size;

    /*
    This 'left' value is here as a fallback, and should be overridden
    with JavaScript when the PagePicker is popped up over a page-range.
    */
    left: calc(50% - 33px);

    /*
    A variable height can be gained from checking the number of leaf-nodes in the
    generated DOM and applying a pre-calculated height to the wrapper element via
    the :has pseudo-selector.  It's mildly inefficient because we have to check
    for the presence of an increasing number of leaf nodes, but this operation
    isn't going to be called often enough to make it a problem.
    */
    &:has(> .page-picker-select > span:nth-last-child(1)) {
      height: 40px;
    }

    &:has(> .page-picker-select > span:nth-last-child(2)) {
      height: 80px;
    }

    &:has(> .page-picker-select > span:nth-last-child(3)) {
      height: 120px;
    }

    &:has(> .page-picker-select > span:nth-last-child(4)) {
      height: 160px;
    }

    &:has(> .page-picker-select > span:nth-last-child(5)) {
      height: 200px;
    }

    &:has(> .page-picker-select > span:nth-last-child(6)) {
      height: 210px;

      /*
      For 6 options and upwards, leave enough space at the top to clearly show
      the dividing-line, implying further items above.
      */
    }

    &::after {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='22,0 34,0 28,6 22,0' stroke='none' fill='white'/%3E%3C/svg%3E ");
      width: 56px;
      height: 10px;
    }
  }

  .page-picker-select {
    @apply p-0 flex flex-col-reverse text-neutral-700 text-sm leading-relaxed h-full overflow-x-hidden overflow-y-auto snap-start w-78 min-h-40 max-h-[250px];
  }

  .page-picker-select:hover {
    @apply cursor-pointer;
  }

  .page-picker-select:focus {
    @apply outline-none;
  }

  .page-picker-select .page-jump {
    @apply flex items-center justify-center h-40 min-h-40 notebook:min-h-fit w-56 p-0 border-t text-neutral-900 leading-32;

    border-top: 1px solid transparent;
  }

  .page-picker-select .page-jump:not(:last-child) {
    border-image-source: linear-gradient(0.25turn, transparent 0 10%, #D9DFE4 10% 90%, transparent 90%);
    border-image-slice: 1;
  }

  .page-picker-select .page-jump:active,
  .page-picker-select .page-jump:hover
  {
    background: radial-gradient(circle closest-side, #EAEDEF, #EAEDEF 95%, transparent 100%);
    border-top: 1px solid transparent;
  }
}

@layer components {
	.ce-list {
		@apply flex
			flex-col [&.ce-list-vertical]:flex-row
			gap-8 [&.ce-list-vertical]:gap-20
	}

	.ce-list > li {
		@apply flex list-none gap-8
	}

	.ce-list > li > svg {
		@apply flex-none h-20 w-20
			text-primary-500 [.ce-list-neutral&]:text-neutral-900
	}
}

@layer components {
	.ce-background-fade {
		@apply fixed inset-0 ce-bg-fade
	}

	.ce-popup {
		@apply fixed bg-neutral-50 shadow
			p-16 tablet:p-32
			rounded-t-8 tablet:rounded-8
			w-screen tablet:w-auto
			max-w-none tablet:max-w-[100vw]
			left-0 tablet:left-1/2
			top-auto tablet:top-1/2
			bottom-0 tablet:bottom-auto
			tablet:-translate-x-1/2 tablet:-translate-y-1/2
	}

	.ce-popup-content {
		@apply
			max-h-[33vh] tablet:max-h-[75vh]
			overflow-y-scroll tablet:overflow-y-auto
	}

	.ce-popup-close {
		@apply absolute -top-40 right-0
	}
}

@layer components {
	.ce-searchbar-header {
		@apply [&_.ce-formfield-input-element]:rounded-[2.125rem]
			[&_.ce-formfield-input-placeholder]:text-neutral-700
	}
}

@layer components {
	.ce-tooltip-small {
		@apply relative inline-flex max-w-[23.75rem] py-4 px-8 justify-center items-center gap-8 rounded-2 bg-neutral-700 shadow-Options text-sm leading-[1rem] text-neutral-50;
	}

	.ce-tooltip-small-arrow {
		@apply absolute content-[""] w-8 h-8 rotate-45 bg-neutral-700;
	}

	.ce-tooltip-small-arrow-top {
		@apply ce-tooltip-small-arrow -top-[0.1875rem];
	}

	.ce-tooltip-small-arrow-bottom {
		@apply ce-tooltip-small-arrow -bottom-[0.1875rem];
	}

	.ce-tooltip-small > svg {
		@apply max-h-16 max-w-16;
	}

	.ce-tooltip-small-text {
		@apply whitespace-nowrap overflow-hidden text-ellipsis
	}
}

@layer components {
	.ce-category-tile-list {
		@apply flex flex-row gap-32;
	}

	.ce-category-tile {
		@apply ce-rounded-box ce-rounded-box-clickable
			rounded-4 px-16 py-8
			flex flex-col gap-8 items-center
			w-[10rem] h-[12.5rem];
	}

	.ce-category-tile.ce-category-tile-horizontal {
		@apply px-12 py-10
			flex-row gap-12
			w-auto h-auto min-h-[3.8125rem] max-h-[5.25rem]
	}

	.ce-category-tile-image {
		@apply w-96 h-96 shrink-0 grow-0
			flex flex-row justify-center items-center;
	}

	.ce-category-tile-horizontal > .ce-category-tile-image {
		@apply w-64 h-64;
	}

	.ce-category-tile-image > * {
		@apply max-w-full max-h-full;
	}

	.ce-category-tile-content {
		@apply flex-[1_0_0] self-stretch
			flex flex-col gap-2 items-start;
	}

	.ce-category-tile-horizontal > .ce-category-tile-content {
		@apply gap-8;
	}

	.ce-category-tile-content-title {
		@apply flex-[1_0_0] self-stretch
			flex flex-col justify-around
			text-center break-words overflow-hidden text-ellipsis
		;
	}

	.ce-category-tile-horizontal .ce-category-tile-content-title {
		@apply text-start;
	}

	.ce-category-tile-content-description {
		@apply max-h-16 self-stretch
			text-center
			leading-[1rem] text-sm overflow-hidden text-ellipsis text-neutral-700;
	}

	.ce-category-tile-horizontal .ce-category-tile-content-description {
		@apply text-start;
	}

	.ce-category-tile-icon {
		@apply shrink-0 grow-0 w-24 h-24 text-neutral-600;
	}
}

@tailwind utilities;

/* https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports */



/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}body{font-family:ConradBasis,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.25;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}h1{font-size:1.75rem;font-weight:300;line-height:2.25}h2{font-size:1.625rem;line-height:2}h2,h3{font-weight:400}h3{font-size:1.5rem;line-height:1.75}h4{font-size:1.25rem;font-weight:500;line-height:1.5}h5{font-size:1rem;font-weight:400;line-height:1.25}button{font-size:1rem;font-weight:700;line-height:1.25}hr{border-width:2px 0 0;--tw-border-opacity:1;border-color:rgb(217 223 228/var(--tw-border-opacity));--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;display:none;margin:0}}@media (min-width:1021px){h1{font-size:2.25rem;line-height:2.75}h1,h2{font-weight:300}h2{font-size:1.75rem;line-height:2.25}}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.\!container{width:100%!important}.container{width:100%}@media (min-width:769px){.\!container{max-width:769px!important}.container{max-width:769px}}@media (min-width:1021px){.\!container{max-width:1021px!important}.container{max-width:1021px}}@media (min-width:1441px){.\!container{max-width:1441px!important}.container{max-width:1441px}}.ce-button{align-items:center;border-radius:4.3125rem;border-style:solid;border-width:2px;display:inline-flex;flex-direction:row;height:2.5rem;justify-content:center;--tw-border-opacity:1;border-color:rgb(255 255 0/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(255 255 0/var(--tw-bg-opacity));font-size:1rem;font-weight:700;line-height:1.25;padding:.5rem .375rem;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ce-button span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.5rem;padding-left:1rem;padding-right:1rem;word-break:break-all}.ce-button svg{display:inline-block;flex:none;height:1.5rem;margin-left:.5rem;margin-right:.5rem;width:1.5rem}.ce-button svg+span{padding-left:0}.ce-button span+svg{margin-left:-.5rem}.ce-button svg:only-child{margin-left:0;margin-right:0}.ce-button:hover{--tw-border-opacity:1;border-color:rgb(224 224 0/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(224 224 0/var(--tw-bg-opacity))}.ce-button:focus-visible{outline-color:#001f42;outline-offset:2px;outline-style:solid;outline-width:2px}.ce-button:disabled{background-color:rgb(255 255 112/var(--tw-bg-opacity));border-color:rgb(255 255 112/var(--tw-border-opacity));color:rgb(59 68 84/var(--tw-text-opacity));cursor:default}.ce-button.ce-button-secondary,.ce-button:disabled{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1}.ce-button.ce-button-secondary{background-color:rgb(55 110 239/var(--tw-bg-opacity));border-color:rgb(55 110 239/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.ce-button.ce-button-secondary:hover{--tw-border-opacity:1;border-color:rgb(21 79 213/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(21 79 213/var(--tw-bg-opacity))}.ce-button.ce-button-secondary:disabled{--tw-border-opacity:1;border-color:rgb(189 210 255/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(189 210 255/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.ce-button.ce-button-tertiary{--tw-border-opacity:1;background-color:transparent;border-color:rgb(21 79 213/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(21 79 213/var(--tw-text-opacity))}.ce-button.ce-button-tertiary:hover{background-color:#3b44540f}.ce-button.ce-button-tertiary:disabled{--tw-border-opacity:1;background-color:transparent;border-color:rgb(189 210 255/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(189 210 255/var(--tw-text-opacity))}.ce-button.ce-button-ghost{background-color:transparent;border-color:transparent;--tw-text-opacity:1;color:rgb(21 79 213/var(--tw-text-opacity))}.ce-button.ce-button-ghost:hover{background-color:#3b44540f;border-color:transparent}.ce-button.ce-button-ghost:disabled{color:rgb(189 210 255/var(--tw-text-opacity))}.ce-button.ce-button-ghost-special,.ce-button.ce-button-ghost:disabled{background-color:transparent;border-color:transparent;--tw-text-opacity:1}.ce-button.ce-button-ghost-special{color:rgb(59 68 84/var(--tw-text-opacity))}.ce-button.ce-button-ghost-special:hover{background-color:#3b44540f;border-color:transparent}.ce-button.ce-button-ghost-special:disabled{color:rgb(180 192 203/var(--tw-text-opacity))}.ce-button.ce-button-ghost-invert,.ce-button.ce-button-ghost-special:disabled{background-color:transparent;border-color:transparent;--tw-text-opacity:1}.ce-button.ce-button-ghost-invert{color:rgb(255 255 255/var(--tw-text-opacity))}.ce-button.ce-button-ghost-invert:hover{background-color:#ffffff33;border-color:transparent}.ce-button.ce-button-ghost-invert:disabled{background-color:transparent;border-color:transparent;color:hsla(0,0%,100%,.5)}.ce-flyin-right-header .ce-button:last-child{justify-self:end}.ce-flyin-right .ce-flyin-right-footer.ce-flyin-right-button-footer>.ce-button{flex-grow:1}.ce-flyin-right .ce-flyin-right-footer.ce-flyin-right-button-footer>.ce-button:not(:first-child){margin-left:1rem}.ce-global-alert .ce-button{align-self:flex-end;flex:none;margin-bottom:.25rem;margin-right:.5rem;margin-top:.25rem;--tw-text-opacity:1;color:rgb(189 210 255/var(--tw-text-opacity))}.ce-global-alert.ce-global-alert-state-error .ce-button{--tw-text-opacity:1;color:rgb(247 214 212/var(--tw-text-opacity))}.ce-global-alert.ce-global-alert-state-success .ce-button{--tw-text-opacity:1;color:rgb(194 239 194/var(--tw-text-opacity))}.ce-global-alert .ce-button:hover{background-color:#ffffff33}.ce-global-alert .ce-button:focus-visible{outline-color:#fff}.ce-global-alert .ce-global-alert-content~.ce-button{margin-top:-.75rem}@media (min-width:769px){.ce-global-alert{align-items:center;flex-direction:row;justify-content:space-between}.ce-global-alert .ce-button{align-self:center}.ce-global-alert .ce-global-alert-content~.ce-button{margin-top:.25rem}}.ce-tooltip-close .ce-button{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.ce-tooltip-close .ce-button:hover{background-color:#ffffff33}.ce-pagination-item.selected{--tw-border-opacity:1;border-color:rgb(55 110 239/var(--tw-border-opacity));--tw-text-opacity:1;color:rgb(55 110 239/var(--tw-text-opacity))}.ce-pagination-item.selected:hover{cursor:default}.ce-pagination-item.pagination-button.disabled{cursor:auto;pointer-events:none;--tw-text-opacity:1;color:rgb(189 210 255/var(--tw-text-opacity))}.ce-pagination-item.pagination-button.disabled svg{fill:#bdd2ff;stroke:#bdd2ff}.ce-category-tile{border-radius:.3125rem;border-width:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-border-opacity:1;border-color:rgb(217 223 228/var(--tw-border-opacity));padding:.375rem}.ce-category-tile:hover{border-color:transparent;--tw-shadow:2px 2px 8px rgba(0,0,0,.2);--tw-shadow-colored:2px 2px 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ce-category-tile{cursor:pointer;outline-color:#3b4454}.ce-category-tile:focus-visible{outline-color:#001f42;outline-width:2px}.ce-category-tile:active{--tw-border-opacity:1;border-color:rgb(229 238 255/var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(229 238 255/var(--tw-bg-opacity))}.ce-category-tile{align-items:center;border-radius:.25rem;display:flex;flex-direction:column;gap:.5rem;height:12.5rem;padding:.5rem 1rem;width:10rem}.ce-category-tile.ce-category-tile-horizontal{flex-direction:row;gap:.75rem;height:auto;max-height:5.25rem;min-height:3.8125rem;padding:.62rem .75rem;width:auto}.ce-category-tile-image{align-items:center;display:flex;flex-direction:row;flex-grow:0;flex-shrink:0;height:6rem;justify-content:center;width:6rem}.ce-category-tile-horizontal>.ce-category-tile-image{height:4rem;width:4rem}.ce-category-tile-image>*{max-height:100%;max-width:100%}.ce-category-tile-content{align-items:flex-start;align-self:stretch;display:flex;flex:1 0 0;flex-direction:column;gap:.125rem}.ce-category-tile-horizontal>.ce-category-tile-content{gap:.5rem}.ce-category-tile-content-title{align-self:stretch;display:flex;flex:1 0 0;flex-direction:column;justify-content:space-around;overflow:hidden;overflow-wrap:break-word;text-align:center;text-overflow:ellipsis}.ce-category-tile-horizontal .ce-category-tile-content-title{text-align:start}.ce-category-tile-content-description{align-self:stretch;font-size:.75rem;line-height:1rem;max-height:1rem;overflow:hidden;text-align:center;text-overflow:ellipsis;--tw-text-opacity:1;color:rgb(59 68 84/var(--tw-text-opacity))}.ce-category-tile-horizontal .ce-category-tile-content-description{text-align:start}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.my-6{margin-bottom:.375rem;margin-top:.375rem}.mr-10{margin-right:.62rem}.mr-20{margin-right:1.25rem}.mt-16{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}
