@use '@angular/material' as mat;

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --border-radius: var(--mat-card-outlined-container-shape,
      --mat-card-outlined-container-shape,
      var(--mat-sys-corner-medium));
}

@layer utilities {
  .rounded-bl-df {
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
  }

  .rounded-br-df {
    border-bottom-right-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }

  .rounded-t-df {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }

  .rounded-b-df {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }

  .rounded-df {
    border-radius: var(--border-radius);
  }
}

.mdc-notched-outline__notch {
  border-right: none;
}

.mat-mdc-snack-bar-container {
  // Base styles for all snackbars
  --snackbar-border-radius: 8px;

  border-radius: var(--snackbar-border-radius);

  // Success variant
  &.bg-success {
    --mat-snack-bar-container-color: theme('colors.green.100');
    --mat-snack-bar-button-color: theme('colors.green.700');
    --mat-snack-bar-supporting-text-color: theme('colors.green.700');

    @media (prefers-color-scheme: dark) {
      --mat-snack-bar-container-color: theme('colors.green.900');
      --mat-snack-bar-button-color: theme('colors.green.300');
      --mat-snack-bar-supporting-text-color: theme('colors.green.300');
    }
  }

  // Error variant
  &.bg-error {
    --mat-snack-bar-container-color: theme('colors.red.100');
    --mat-snack-bar-button-color: theme('colors.red.700');
    --mat-snack-bar-supporting-text-color: theme('colors.red.700');

    @media (prefers-color-scheme: dark) {
      --mat-snack-bar-container-color: theme('colors.red.900');
      --mat-snack-bar-button-color: theme('colors.red.300');
      --mat-snack-bar-supporting-text-color: theme('colors.red.300');
    }
  }

  // Info variant
  &.bg-info {
    --mat-snack-bar-container-color: theme('colors.blue.100');
    --mat-snack-bar-button-color: theme('colors.blue.700');
    --mat-snack-bar-supporting-text-color: theme('colors.blue.700');

    @media (prefers-color-scheme: dark) {
      --mat-snack-bar-container-color: theme('colors.blue.900');
      --mat-mdc-snack-bar-button-color: theme('colors.blue.300');
      --mat-snack-bar-supporting-text-color: theme('colors.blue.300');
    }
  }

  // Warning variant
  &.bg-warning {
    --mat-snack-bar-container-color: theme('colors.amber.100');
    --mat-snack-bar-button-color: theme('colors.amber.700');
    --mat-snack-bar-supporting-text-color: theme('colors.amber.700');

    @media (prefers-color-scheme: dark) {
      --mat-snack-bar-container-color: theme('colors.amber.900');
      --mat-snack-bar-button-color: theme('colors.amber.300');
      --mat-snack-bar-supporting-text-color: theme('colors.amber.300');
    }
  }
}

/* You can add global styles to this file, and also import other style files */
body {
  background-color: #0000002b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

mat-icon {
  font-family: 'Material Icons Outlined' !important;
  font-feature-settings: 'liga' !important;
}

mat-icon:hover,
mat-icon:focus,
mat-icon:active,
.selected {
  font-family: 'Material Icons' !important;
}

html {
  color-scheme: light;
  @include mat.theme((color: mat.$azure-palette,
      typography: Roboto,
      density: 0,
    ));
}

@include mat.typography-hierarchy(mat.define-theme((typography: (use-system-variables: true,
        system-variables-prefix: mat-sys,
      ),
    )));
.external-link {
  color: theme('colors.blue.600');
  text-decoration: none;
  border-bottom: 1px dotted theme('colors.blue.600');
  transition: color 0.2s ease;
}

.external-link:hover {
  color: theme('colors.blue.700');
  text-decoration: underline;
}

.custom-link {
  color: theme('colors.pink.600');
  font-weight: 500;
}

/* Style based on protocol */
.external-link[href^="mailto:"] {
  color: theme('colors.pink.700');
}

.external-link[href^="tel:"] {
  color: theme('colors.green.600');
}
