// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '~@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$Excel-Challenger-Bank-primary: mat.define-palette(mat.$indigo-palette);
$Excel-Challenger-Bank-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$Excel-Challenger-Bank-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$Excel-Challenger-Bank-theme: mat.define-light-theme((
  color: (
    primary: $Excel-Challenger-Bank-primary,
    accent: $Excel-Challenger-Bank-accent,
    warn: $Excel-Challenger-Bank-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($Excel-Challenger-Bank-theme);

/* You can add global styles to this file, and also import other style files */
@import '~bootstrap/dist/css/bootstrap.min.css';
@import './variables';
@import './ng-select';
@import "~@ng-select/ng-select/themes/default.theme.css";

html, body {
  font-family: 'Montserrat', sans-serif !important;
  color: $color-neutral-900;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 100% !important;
}

.mat-slider-track-fill, .mat-slider-thumb {
  background-color: $primary-green !important;
}

.mat-slider-track-background {
  background-color: $gray-3!important;
}

.mat-slider-horizontal .mat-slider-ticks {
    background-image: repeating-linear-gradient(to right, $gray-4, $gray-4 2px, transparent 0, transparent);
    background-image: -moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
}

.mat-slider-has-ticks .mat-slider-wrapper::after {
  border-color: $gray-4
}

.cursor-pointer {
  cursor: pointer;
}

.blur {
  filter: blur(6px);
}

strong {
  font-weight: bold !important;
}

.ngxp__arrow {
  display: none;
}

.link-disabled {
  color: gray;
  cursor: not-allowed;
  text-decoration: underline;
}

::ng-deep .snackbar-warning {
  background-color: #F8DDBD;
  color: black !important;
  font-size: 14;
  font-weight: 600;
  font-family: open-sans
}

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

.form-check-input-legal {
  background-color: $color-secondary-50;
  border: 2px solid $color-secondary-900;
}

.form-check-input-legal:focus {
  box-shadow: 0 0 0 0.25rem $color-secondary-50;
  border-color: $color-secondary-900;
}


app-mandatory-bank-account-modal {
  position: fixed;
  z-index: 10000 !important;
  display: block;
}

.modal-backdrop-custom {
  z-index: 10001 !important;
}

/* Ocultar scrollbar manteniendo funcionalidad */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Ocultar widget de BotMaker cuando el MF está embebido */
.botmaker_style,
[id*="botmaker"],
[class*="botmaker"],
iframe[src*="botmaker"] {
  display: none !important;
}