@import "./variables";

// Card
$card-bg: $theme-elevation-1;
$card-cap-bg: $theme-elevation-1;

// Modal
$modal-content-bg: $theme-elevation-1;
$modal-content-border-color: $theme-elevation-2;

// Dropdown
$dropdown-bg: $theme-elevation-1;
$dropdown-link-color: $theme-text;
$dropdown-link-hover-bg: $theme-elevation-1;
$dropdown-link-hover-color: $theme-text-muted;
$dropdown-border-color: $theme-elevation-2;
$dropdown-divider-bg: $theme-elevation-2;

// Popover
$popover-bg: $theme-elevation-1;
$popover-border-color: $theme-elevation-2;

// Form
$input-bg: $theme-elevation-2;
$input-border-color: $theme-elevation-2;
$input-color: $theme-text;
$custom-range-track-height: 0.1rem;
$custom-range-thumb-bg: $theme-text;
$custom-range-track-bg: $theme-text-muted;

:root {
  --text-body: #{$theme-text};
  --text-muted: #{$theme-text-muted};
}

.elevated {
  background-color: $theme-elevation-1;
}

.breadcrumb {
  background: none !important;
  padding: 0 !important;
}

a.active {
  color: $primary;
}

h1, h2, h3, h4, h5 {
  color: #fff;
}

.btn-link:focus {
  box-shadow: none !important;
}

@import './nav';
@import './table';

$enable-print-styles: false;
$enable-responsive-font-sizes: true;

@import '~bootstrap';
@import '~bootstrap-vue';

.modal-header .close {
  color: $theme-text;
  opacity: 1;
}