Elep

@tailwind components;

/**
 * Tailwind customization file
 * ------------------------------
 */

/* Miscellaneous */
@layer components {
  .report-loading-screen-overlay {
    @apply absolute flex flex-col h-full items-center justify-center w-full;

@apply z-[95] bg-[--dashlet-background];
  }

.ui-timepicker-wrapper {
    @apply border-[--dropdown-border-widget] shadow-xl text-sm;
  }
}

/* SugarIcons */
@layer components {
  .sicon {
    @apply align-middle antialiased hover:text-[--sicon-hover-color] inline-block normal-case shrink-0 text-[--sicon-color];

font: normal normal normal 1em/1 'SugarIcons';
  }
}

/* Sidebar Navigation items */
@layer components {
  .sidebar-nav-item-btn .sicon:hover {
    @apply bg-transparent text-white;
  }

.label-module-size-sm {
    @apply h-6 text-xs w-6;
  }

.label-module-size-lg {
    @apply h-8 text-base w-8;
  }

.label-module-color-sidebar,
  .label-module-color-sidebar a {
    @apply bg-transparent text-white;

&.sicon {
      @apply bg-transparent text-white;
    }
  }

.label-module-color-army,
  .label-module-color-army a {
    @apply bg-army-200 text-army-600;

&.sicon {
      @apply bg-army-400 text-army-200;
    }
  }

.label-module-color-coral,
  .label-module-color-coral a {
    @apply bg-coral-200 text-coral-600;

&.sicon {
      @apply bg-coral-400 text-coral-200;
    }
  }

.label-module-color-green,
  .label-module-color-green a {
    @apply bg-green-200 text-green-600;

&.sicon {
      @apply bg-green-400 text-green-200;
    }
  }

.label-module-color-ocean,
  .label-module-color-ocean a {
    @apply bg-ocean-200 text-ocean-600;

&.sicon {
      @apply bg-ocean-400 text-ocean-200;
    }
  }

.label-module-color-orange,
  .label-module-color-orange a {
    @apply bg-orange-200 text-orange-600;

&.sicon {
      @apply bg-orange-400 text-orange-200;
    }
  }

.label-module-color-pacific,
  .label-module-color-pacific a {
    @apply bg-pacific-200 text-pacific-600;

&.sicon {
      @apply bg-pacific-400 text-pacific-200;
    }
  }

.label-module-color-pink,
  .label-module-color-pink a {
    @apply bg-pink-200 text-pink-600;

&.sicon {
      @apply bg-pink-400 text-pink-200;
    }
  }

.label-module-color-purple,
  .label-module-color-purple a {
    @apply bg-purple-200 text-purple-600;

&.sicon {
      @apply bg-purple-400 text-purple-200;
    }
  }

.label-module-color-red,
  .label-module-color-red a {
    @apply bg-red-200 text-red-600;

&.sicon {
      @apply bg-red-400 text-red-200;
    }
  }

.label-module-color-teal,
  .label-module-color-teal a {
    @apply bg-teal-200 text-teal-600;

&.sicon {
      @apply bg-teal-400 text-teal-200;
    }
  }

.label-module-color-yellow,
  .label-module-color-yellow a {
    @apply bg-yellow-200 text-yellow-600;

&.sicon {
      @apply bg-yellow-400 text-yellow-200;
    }
  }
}

/* Bootstrap collapse drawer */
@layer components {
  .bs-collapse {
    @apply relative duration-300 ease-linear h-0 overflow-hidden transition-[height];

&.show {
      @apply h-auto;
    }
  }
}

@tailwind utilities;

/* Custom classes */
@layer utilities {
  .reset-width {
    @apply !min-w-0 !w-auto;
  }
}

/* Tables */
/*
 * TODO move this @layer base when we add in base directive.
 * Not using @layer declaration currently as the tree-shaking messes with the output build.
 * In the future, we can add postcss to achieve proper CSS nesting functionality.
 */
table {
  @apply border-separate border-spacing-0 max-w-full;

& thead {
    @apply table-header-group;
  }

& thead > tr > th {
    @apply bg-[--primary-content-background] border-b border-r border-[--border-color] box-border [&:nth-last-child(2)]:border-r-0 last:border-l table-cell text-left;
  }

& tbody {
    @apply table-row-group;
  }

& tbody > tr > td {
    @apply bg-[--primary-content-background] border-b border-[--border-color] table-cell;
  }

& tbody > tr:last-child > td {
    @apply border-b-0;
  }

& tbody > tr > td &[data-type="avatar"] .label-module {
    @apply label-module-size-sm;
  }

& tbody > tr.tr-inline-edit > td &[data-type$="-cascade"] {
      @apply h-auto max-h-[5rem] min-w-[13.75rem];
  }

& tbody > tr.inline-edit > td .cascade-label-wrapper {
    @apply mt-1 mb-0;
  }

& tr {
    @apply table-row;
  }
}