/* #Box shadows */
$box-shadow-default: 0px 0px 10px rgba(0, 0, 0, 0.1);
$box-shadow-medium: 0px 1px 2px 0px #0000000D;
$box-shadow-large: 0 0 25px rgba(0, 0, 0, 0.2);

/* #Border settings */
$border-radius-base: .25rem;
$border-radius-xl: 12px;
$border-radius-medium: 6px;
$border-radius-large: 8px;

/* #Transition */
$trans-duration-style: .24s ease-out;

/* #Viewport Breakpoints */
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

:root {
  --mat-standard-button-toggle-shape: #{calc-rem($border-radius-large)};
  --mat-option-label-text-color: var(--color-gray-900);
  --mat-option-focus-state-layer-color: var(--color-gray-100);
  --mat-option-hover-state-layer-color: var(--color-gray-50);
  --mat-divider-color: var(--color-gray-100);
  --mat-select-placeholder-text-color: var(--color-gray-400);
}