@use "@angular/material" as mat;
@use "material-icons/iconfont/material-icons.scss";
@include mat.core();

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

$clipper-default-light: mat.define-theme();

$clipper-default-dark: mat.define-theme(
  (
    color: (
      theme-type: dark,
    ),
  )
);

$clipper-cyan-dark: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: mat.$cyan-palette,
    ),
  )
);

$clipper-cyan-light: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$cyan-palette,
    ),
  )
);

$clipper-azure-dark: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: mat.$azure-palette,
    ),
  )
);

$clipper-azure-light: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
    ),
  )
);

$clipper-yellow-dark: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: mat.$yellow-palette,
    ),
  )
);

$clipper-yellow-light: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$yellow-palette,
    ),
  )
);

.azure-dark {
  @include mat.all-component-colors($clipper-azure-dark);
  .clipper-bg {
    @apply bg-gradient-to-br from-blue-700 to-blue-800;
  }
}

.azure-light {
  @include mat.all-component-colors($clipper-azure-light);
  .clipper-bg {
    @apply bg-gradient-to-br from-blue-400 to-blue-500;
  }
}

.cyan-dark {
  @include mat.all-component-colors($clipper-cyan-dark);
  .clipper-bg {
    @apply bg-gradient-to-br from-cyan-700 to-cyan-800;
  }
}

.cyan-light {
  @include mat.all-component-colors($clipper-cyan-light);
  .clipper-bg {
    @apply bg-gradient-to-br from-cyan-300 to-cyan-400;
  }
}

.yellow-dark {
  @include mat.all-component-colors($clipper-yellow-dark);
  .clipper-bg {
    @apply bg-gradient-to-br from-yellow-500 to-yellow-600;
  }
}

.yellow-light {
  @include mat.all-component-colors($clipper-yellow-light);
  .clipper-bg {
    @apply bg-gradient-to-br from-yellow-300 to-yellow-400;
  }
}

.default-dark {
  @include mat.all-component-colors($clipper-default-dark);
  .clipper-bg {
    @apply bg-gradient-to-br from-gray-700 to-gray-800;
  }
}

.default-light {
  .clipper-bg {
    @apply bg-gradient-to-br from-gray-400 to-gray-500;
  }
}

html,
body {
  @include mat.all-component-themes($clipper-default-light);
  @apply overflow-hidden p-0 m-0 font-sans;
  @layer mat-typography;
}

.wrapper {
  @apply rounded-lg border border-solid m-1 mt-0 flex bg-slate-50/30 shadow-lg relative;
}

.manager-nav-wrapper {
  @apply rounded-lg border border-solid flex bg-slate-50/30 shadow-lg relative box-border;
}
