/* prettier-ignore */
@use 'sass:math';
@import 'colors';

// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-shadows: true !default;
$enable-negative-margins: true !default;

//*-----------------------------------------------
//|   Spacing
//----------------------------------------------
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 2.5,
  7: $spacer * 3,
  8: $spacer * 3.5,
  9: $spacer * 4,
  10: $spacer * 4.5,
  11: $spacer * 5,
  12: $spacer * 6,
  13: $spacer * 6.5,
  14: $spacer * 7,
  15: $spacer * 7.5
) !default;

//*-----------------------------------------------
//|   Link
//-----------------------------------------------*/
$link-decoration: none !default;
$link-hover-decoration: underline !default;
$link-hover-color: $primary-text-emphasis !default;

//*-----------------------------------------------
//|   Grid Breakpoints
//-----------------------------------------------*/
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1540px
) !default;

//*-----------------------------------------------
//|   Grid containers
//-----------------------------------------------*/
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1184px,
  xxl: 1678px
) !default;

// phoenix specific variable
$container-small-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1216px
) !default;

$container-medium-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1216px,
  xxl: 1400px
) !default;

$bg-opacities: (
  10: 0.1,
  25: 0.25,
  50: 0.5,
  75: 0.75,
  85: 0.85,
  // new
  100: 1
) !default;

$text-opacities: (
  25: 0.25,
  50: 0.5,
  75: 0.75,
  85: 0.85,
  100: 1
) !default;

//*-----------------------------------------------
//|   Grid Collumn
//-----------------------------------------------*/
$grid-gutter-width: 2rem !default;

//*-----------------------------------------------
//|   Border radious
//-----------------------------------------------*/
$border-radius: 0.375rem !default;
$border-radius-sm: 0.25rem !default;
$border-radius-lg: 0.5rem !default;

//*-----------------------------------------------
//|   Shadow
//-----------------------------------------------*/
$box-shadow: 0px 2px 4px -2px rgba(36, 40, 46, 0.08) !default;

// phoenix specific variable
$box-shadow-gray-400: 0px 4px 8px -6px rgba(36, 40, 46, 0.03),
  0px 16px 8px -4px rgba(36, 40, 46, 0.03) !default;

//*-----------------------------------------------
//|   Fonts Families
//-----------------------------------------------*/
$font-family-sans-serif: 'Nunito Sans', -apple-system, BlinkMacSystemFont,
  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$font-family-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas,
  'Liberation Mono', 'Courier New', monospace !default;

//*-----------------------------------------------
//|   Fonts
//-----------------------------------------------*/
$type-scale: 1.25 !default; // phoenix spesific variable

$font-size-base: 1rem !default;
$font-size-sm: $font-size-base * 0.875 !default;
$font-size-lg: $font-size-base * 1.2 !default;

$font-sizes: (
  1: pow($type-scale, 7) * $font-size-base,
  // 76.29px
  2: pow($type-scale, 6) * $font-size-base,
  // 61.04px
  3: pow($type-scale, 5) * $font-size-base,
  // 48.83px
  4: pow($type-scale, 4) * $font-size-base,
  // 39.06px
  5: pow($type-scale, 3) * $font-size-base,
  // 31.25px
  6: pow($type-scale, 2) * $font-size-base,
  //25px
  7: pow($type-scale, 1) * $font-size-base,
  //20px
  8: $font-size-base,
  // 16px
  9: math.div(1, $type-scale) * $font-size-base,
  // 12.80px
  10: math.div(1, pow($type-scale, 2)) * $font-size-base,
  // 10.24px
  11: math.div(1, pow($type-scale, 3)) * $font-size-base,
  // 8.19px
) !default;

$font-weight-thin: 100 !default;
$font-weight-lighter: 200 !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: 800 !default;
$font-weight-black: 900 !default;

$line-height-base: 1.49 !default;
$line-height-sm: 1.2 !default;
$line-height-lg: 1.4 !default;

$h1-font-size: map_get($font-sizes, 4) !default;
$h2-font-size: map_get($font-sizes, 5) !default;
$h3-font-size: map_get($font-sizes, 6) !default;
$h4-font-size: map_get($font-sizes, 7) !default;
$h5-font-size: map_get($font-sizes, 8) !default;
$h6-font-size: map_get($font-sizes, 9) !default;

// scss-docs-start headings-variables
$headings-margin-bottom: map-get($spacers, 1) !default;
// $headings-font-family: $font-family-sans-serif !default;
$headings-font-weight: $font-weight-bold !default;
$headings-line-height: 1 !default;
$headings-color: var(--#{$prefix}emphasis-color) !default;
// scss-docs-end headings-variables

// scss-docs-start display-headings
$display-font-sizes: (
  1: map_get($font-sizes, 1),
  2: map_get($font-sizes, 2),
  3: map_get($font-sizes, 3),
  4: map_get($font-sizes, 4),
  5: map_get($font-sizes, 5),
  6: map_get($font-sizes, 6)
) !default;

$display-font-weight: $font-weight-normal !default;
// scss-docs-end display-headings

// scss-docs-start type-variables
$lead-font-size: map-get($font-sizes, 7) !default;
$lead-font-weight: $font-weight-semibold !default;

$small-font-size: 75% !default;

$blockquote-font-size: $font-size-lg !default;

$hr-color: var(--#{$prefix}border-color-translucent) !default;
$hr-opacity: 1 !default;
// scss-docs-end type-variables

//*-----------------------------------------------
//|   Tables
//-----------------------------------------------*/
$table-color: var(--#{$prefix}body-color) !default;
$table-cell-padding-y: 1rem !default;
$table-bg: transparent !default;
$table-th-font-weight: $font-weight-bolder !default;
$table-active-bg: rgba(var(--#{$prefix}quaternary-bg-rgb), 0.4) !default;

$table-striped-color: var(--#{$prefix}body-highlight-color) !default;
$table-striped-bg: rgba(var(--#{$prefix}quaternary-bg-rgb), 0.2) !default;

$table-hover-color: var(--#{$prefix}emphasis-color) !default;
$table-hover-bg: rgba(var(--#{$prefix}primary-dark-rgb), 0.07) !default;

$table-border-color: var(--#{$prefix}border-color-translucent);

$table-striped-order: even !default;

$table-group-separator-color: inherit !default;

//*-----------------------------------------------
//|   Buttons and Forms
//-----------------------------------------------*/

// scss-docs-start input-btn-variables
$input-btn-padding-y: 0.625rem !default;
$input-btn-padding-x: 1.5rem !default;

$input-btn-focus-blur: 0 !default;

$input-btn-padding-y-sm: 0.5rem !default;
$input-btn-padding-x-sm: 1rem !default;
$input-btn-font-size-sm: map-get($font-sizes, 9) !default;

$input-btn-padding-y-lg: 0.875rem !default;
$input-btn-padding-x-lg: 1.5rem !default;
$input-btn-font-size-lg: map-get($font-sizes, 8) !default;
// scss-docs-end input-btn-variables

// buttons
//

// scss-docs-start btn-variables
$btn-line-height: 1.2 !default;

$input-btn-font-size: map-get($font-sizes, 9) !default;
$btn-font-weight: $font-weight-bold !default;

$btn-box-shadow: initial !default;

$btn-focus-width: 0 !default;
$btn-focus-box-shadow: 0 0 0 0.25rem transparent !default;
$btn-disabled-opacity: 0.3 !default;
$btn-active-box-shadow: initial !default;

$btn-link-disabled-color: $gray-400 !default;

$btn-border-radius-sm: $border-radius !default;
$btn-border-radius-lg: $border-radius !default;
// scss-docs-end btn-variables

// Forms
//
// scss-docs-start form-label-variables
$form-label-font-size: map-get($font-sizes, 10) !default;
$form-label-font-weight: $font-weight-bold !default;
$form-label-color: var(--#{$prefix}tertiary-color) !default;
// scss-docs-end form-label-variables

// scss-docs-start form-input-variables
$input-padding-y: 0.5rem !default;
$input-padding-x: 1rem !default;
$input-font-weight: $font-weight-semibold !default;

$input-padding-y-sm: 0.375rem !default;

$input-padding-y-lg: 0.75rem !default;
$input-padding-x-lg: 1rem !default;

$input-bg: var(--#{$prefix}emphasis-bg) !default;
$input-disabled-color: var(--#{$prefix}quaternary-color) !default;
$input-disabled-bg: rgba(var(--#{$prefix}gray-100-rgb), 0.7) !default;

$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-box-shadow: inset 0 1px 2px transparent !default;

$input-border-radius-sm: $border-radius !default;
$input-border-radius-lg: $border-radius !default;

$input-focus-border-color: $primary !default;
$input-focus-box-shadow: inset 0 0 0 30px var(--#{$prefix}emphasis-bg),
  0 0 0 0.25rem rgba(var(--#{$prefix}primary-rgb), 0.25) !default;

$input-placeholder-color: rgba(
  var(--#{$prefix}quaternary-color-rgb),
  0.8
) !default; // scss-docs-end form-input-variables

// scss-docs-start form-check-variables
$form-check-margin-bottom: 0.34375rem !default;
$form-check-label-color: $form-label-color !default;
$form-check-input-border: 1px solid var(--#{$prefix}border-color) !default;

// scss-docs-end form-check-variables

// scss-docs-start form-switch-variables
$form-switch-color: $white !default;
$form-switch-focus-color: $white !default;
// scss-docs-end form-switch-variables

// scss-docs-start input-group-variables
$input-group-addon-bg: var(--#{$prefix}input-group-addon-bg-global) !default;
// scss-docs-end input-group-variables

// scss-docs-start form-select-variables
$form-select-indicator-padding: 2.5rem !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-box-shadow: $input-box-shadow !default;
$form-select-indicator: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03NS4zNDggMTI3LjE5MkM3Mi40MzgxIDEyNy4xOTIgNjkuODUxNCAxMjYuMjIyIDY3LjkxMTUgMTI0LjI4Mkw1LjgzMjE1IDYyLjIwMjNDMS42Mjg4NyA1OC4zMjIzIDEuNjI4ODcgNTEuNTMyNCA1LjgzMjE1IDQ3LjY1MjVDOS43MTIxMSA0My40NDkyIDE2LjUwMiA0My40NDkyIDIwLjM4MiA0Ny42NTI1TDc1LjM0OCAxMDIuMjk1TDEyOS45OTEgNDcuNjUyNUMxMzMuODcxIDQzLjQ0OTIgMTQwLjY2MSA0My40NDkyIDE0NC41NDEgNDcuNjUyNUMxNDguNzQ0IDUxLjUzMjQgMTQ4Ljc0NCA1OC4zMjIzIDE0NC41NDEgNjIuMjAyM0w4Mi40NjEzIDEyNC4yODJDODAuNTIxMyAxMjYuMjIyIDc3LjkzNDcgMTI3LjE5MiA3NS4zNDggMTI3LjE5MloiIGZpbGw9IiMzMTM3NEEiLz4KPC9zdmc+Cg==') !default;
$form-select-bg-size: 9px 12px !default;
// scss-docs-end form-select-variables

// scss-docs-start form-range-variables
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
// scss-docs-end form-range-variables

// scss-docs-start form-floating-variables
$form-floating-height: add(2.875rem, 2px) !default;
$form-floating-input-padding-t: 22.5px !default;
$form-floating-input-padding-b: 9.5px !default;
$form-floating-label-transform: scale(0.85) translateY(-0.4rem)
  translateX(0.15rem) !default;
// scss-docs-end form-floating-variables

//*-----------------------------------------------
//|   Z-index
//-----------------------------------------------*/
$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5
) !default;

//*-----------------------------------------------
//|   Nav-tabs
//-----------------------------------------------*/
$nav-tabs-border-width: 2px !default;
$nav-underline-link-active-color: var(--#{$prefix}primary) !default;

// nav-pills
$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
$nav-pills-link-active-bg: transparent !default;
$nav-pills-border-radius: var(--#{$prefix}border-radius-pill) !default;

//*-----------------------------------------------
//|   Navbar
//-----------------------------------------------*/
$navbar-padding-y: map_get($spacers, 2) !default;
$navbar-padding-x: map_get($spacers, 4) !default;

$navbar-brand-font-size: map_get($font-sizes, 5) !default;

//*-----------------------------------------------
//|   Navigation
//-----------------------------------------------*/

$navbar-font-size: $font-size-base * 0.8 !default; // phoenix specific variable

$navbar-light-hover-color: rgba(
  var(--#{$prefix}emphasis-color-rgb),
  0.9
) !default;
$navbar-light-disabled-color: rgba(
  var(--#{$prefix}emphasis-color-rgb),
  0.25
) !default;
$navbar-light-toggler-icon-bg: str-replace(
  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#9da9bb' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M0 6h30M0 14h30M0 22h30'/%3E%3C/svg%3E"),
  '#',
  '%23'
) !default;

$navbar-dark-color: rgba($white, 0.7) !default;
$navbar-dark-hover-color: rgba($white, 0.9) !default;
$navbar-dark-toggler-icon-bg: str-replace(
  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#9da9bb' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M0 6h30M0 14h30M0 22h30'/%3E%3C/svg%3E"),
  '#',
  '%23'
) !default;

// phoenix specific variable
$navbar-top-slim-height: 1.7rem !default;
$navbar-top-height: var(--#{$prefix}navbar-top-height) !default;
$standard-nav-height: 3.5625rem !default;

//*-----------------------------------------------
//|   Dropdowns | Dropdown menu container and contents.
//-----------------------------------------------*/
$dropdown-padding-y: map_get($spacers, 3) !default;
$dropdown-font-size: $navbar-font-size !default;

// $dropdown-color: var(--#{$prefix}tertiary-color) !default;
$dropdown-bg: var(--#{$prefix}emphasis-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color) !default;
$dropdown-divider-bg: var(--#{$prefix}border-color) !default;

$dropdown-link-color: var(--#{$prefix}dropdown-link-color-global) !default;
$dropdown-link-hover-color: var(
  --#{$prefix}dropdown-link-hover-color-global
) !default;
$dropdown-link-hover-bg: var(--#{$prefix}secondary-bg) !default;
$dropdown-link-disabled-color: $gray-100 !default;

$dropdown-item-padding-y: map_get($spacers, 2) !default;
$dropdown-item-padding-x: map_get($spacers, 3) !default;

//*-----------------------------------------------
//|   Pagination
//-----------------------------------------------*/
$pagination-padding-y: 0.5rem !default;

$pagination-font-size: map-get($font-sizes, 9) !default;

$pagination-color: var(--#{$prefix}secondary-color) !default;
$pagination-bg: transparent !default;
$pagination-border-width: 0 !default;

$pagination-hover-color: var(--#{$prefix}primary) !default;
$pagination-hover-bg: var(--#{$prefix}secondary-bg) !default;

//*-----------------------------------------------
//|   Cards
//-----------------------------------------------*/
$card-spacer-y: map-get($spacers, 4) !default;
$card-spacer-x: map-get($spacers, 4) !default;
$card-title-spacer-y: $spacer !default;
$card-title-color: $headings-color !default;
$card-border-radius: $border-radius-lg !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-cap-bg: transparent !default;
$card-cap-padding-y: $card-spacer-y !default;
$card-bg: var(--#{$prefix}emphasis-bg) !default;

//*-----------------------------------------------
//|   Accordion
//-----------------------------------------------*/
$accordion-padding-y: map-get($spacers, 2) !default;
$accordion-padding-x: 0 !default;
$accordion-bg: transparent !default;
$accordion-color: var(--#{$prefix}body-highlight-color) !default;

$accordion-border-radius: 0 !default;
$accordion-border-width: 0 !default;

$accordion-button-color: var(--#{$prefix}primary) !default;
$accordion-button-active-color: var(--#{$prefix}emphasis-color) !default;
$accordion-button-active-bg: transparent !default;

$accordion-icon-color: $primary !default;
$accordion-icon-active-color: $primary !default;

$accordion-button-icon: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 900 900'%3E%3Cpath fill='#{$accordion-icon-color}' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E") !default;
$accordion-button-active-icon: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 900 900'%3E%3Cpath fill='#{$accordion-icon-active-color}' d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E") !default;

// /*-----------------------------------------------
//|   Tooltip
//-----------------------------------------------*/
$tooltip-font-size: map-get($font-sizes, 9) !default;
$tooltip-padding-y: 0.5rem !default;

$tooltip-color: $white;
$tooltip-bg: $gray-1000 !default;

$tooltip-border-radius: $border-radius-sm !default;

//*-----------------------------------------------
//|   Popover
//-----------------------------------------------*/
$popover-bg: var(--#{$prefix}emphasis-bg) !default;
$popover-border-color: var(--#{$prefix}border-color) !default;

//*-----------------------------------------------
//|   Toast
//-----------------------------------------------*/
$toast-font-size: $font-size-base !default;
$toast-padding-x: 0 !default;
$toast-padding-y: map-get($spacers, 3) !default;
$toast-box-shadow: $box-shadow-gray-400 !default;
$toast-background-color: rgba(var(--#{$prefix}emphasis-bg-rgb), 0.85) !default;
$toast-border-color: var(--#{$prefix}border-color) !default;

$toast-header-color: var(--#{$prefix}secondary-color) !default;
$toast-header-background-color: transparent !default;
$toast-header-border-color: var(--#{$prefix}border-color-translucent) !default;

//*-----------------------------------------------
//|   Badge
//-----------------------------------------------*/
$badge-padding-y: 0.355555em !default;
$badge-padding-x: 0.711111em !default;
$badge-border-radius: $border-radius-sm !default;

// /*-----------------------------------------------
//|   Modal
//-----------------------------------------------*/
$modal-content-border-radius: $border-radius !default;
$modal-content-bg: var(--#{$prefix}emphasis-bg) !default;
$modal-content-border-color: transparent !default;

//*-----------------------------------------------
//|   Alert
//-----------------------------------------------*/
$alert-padding-y: map-get($spacers, 4) !default;
$alert-padding-x: map-get($spacers, 4) !default;
$alert-border-radius: map-get($spacers, 2) !default;

//*-----------------------------------------------
//|   Progress
//-----------------------------------------------*/
$progress-height: 0.313rem !default;
$progress-border-radius: $border-radius-lg !default;
$progress-box-shadow: initial !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;

///*-----------------------------------------------
//|   List Group
//-----------------------------------------------*/
$list-group-color: var(--#{$prefix}secondary-color) !default;
$list-group-bg: var(--#{$prefix}emphasis-bg) !default;
$list-group-border-color: var(--#{$prefix}border-color-translucent) !default;
$list-group-disabled-color: var(--#{$prefix}quaternary-color) !default;
$list-group-hover-bg: var(--#{$prefix}body-highlight-bg) !default;

//*-----------------------------------------------
//|   Thumbnail
//-----------------------------------------------*/
$thumbnail-bg: var(--#{$prefix}emphasis-bg) !default;

// /*-----------------------------------------------
//|   Breadcrumbs
//-----------------------------------------------*/
$breadcrumb-font-size: map-get($font-sizes, 9) !default;
$breadcrumb-item-padding-x: map-get($spacers, 2) !default;
$breadcrumb-active-color: var(--#{$prefix}body-color) !default;
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' width='6' fill='#{$gray-600}' viewBox='0 0 256 480'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E") !default;

//*-----------------------------------------------
//|   Carousel
//-----------------------------------------------*/
$carousel-transition-duration: 0.8s !default;
$carousel-indicator-active-bg: $primary !default;

// /*-----------------------------------------------
//|   Spinner
//-----------------------------------------------*/
$spinner-width-sm: 1.35rem !default;
$spinner-height-sm: $spinner-width-sm !default;

// close
// phoenix specific variable
$btn-close-darken-nav-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#ffffff'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
// $btn-close-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#ffffff'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;

//*-----------------------------------------------
//|  Offcanvas
//-----------------------------------------------*/
$offcanvas-horizontal-width: 458px !default;
$offcanvas-bg-color: var(--#{$prefix}emphasis-bg) !default;

// gutters
$gutters: map-merge(
  $spacers,
  (
    card: $card-spacer-x * 2
  )
) !default;

//*---------------------------------------------------------------------------
//|   Phoenix specific components
//----------------------------------------------------------------------------*/

//*-----------------------------------------------
//|   Viewport Heights & Widths
//----------------------------------------------
$viewport-heights: (
  50: 50vh,
  100: 100vh
) !default;

$sizes: (
  25: 25%,
  30: 30%,
  50: 50%,
  60: 60%,
  70: 70%,
  75: 75%,
  100: 100%,
  auto: auto
) !default;

// /*-----------------------------------------------
//|   Footer
//-----------------------------------------------*/
$footer-height: 4rem !default;

// /*-----------------------------------------------
//|   Avatar
//-----------------------------------------------*/
$avatars-dimension: (
  's': toRem(24),
  'm': toRem(32),
  'l': toRem(40),
  'xl': toRem(48),
  '2xl': toRem(56),
  '3xl': toRem(72),
  '4xl': toRem(96),
  '5xl': toRem(150)
) !default;
$avatars-placeholder-bg: var(--#{$prefix}secondary-bg) !default;
$avatars-status-border-color: var(--#{$prefix}emphasis-bg) !default;

//*-----------------------------------------------
//|   Scrollbar
//-----------------------------------------------*/
$scrollbar-bg: var(--#{$prefix}scrollbar-bg) !default;

//*-----------------------------------------------
//|   Layout
//-----------------------------------------------*/
$content-padding-x: map-get($spacers, 6) !default;
$content-padding-top: calc($navbar-top-height + 2rem) !default;
$content-padding-bottom: 6.375rem !default;

//*-----------------------------------------------
//|   Plugins color variables
//-----------------------------------------------*/

$data-table-pagination-button-color: $black !default;

//*-----------------------------------------------
//|   Navbar Vertical
//-----------------------------------------------*/

$navbar-vertical-breakpoints: mapReverse($grid-breakpoints) !default;
$navbar-vertical-width: 15.875rem !default;
$navbar-vertical-icon-width: 1rem !default;

$navbar-vertical-link-font-size: map-get($font-sizes, 9) !default;
$navbar-vertical-link-padding-y: 0.35rem !default;

$navbar-vertical-dropdown-font-size: 0.8125rem !default;
$navbar-vertical-dropdown-link-padding-x: map-get($spacers, 2) !default;
$navbar-vertical-dropdown-link-padding-y: map-get($spacers, 1) !default;

$navbar-vertical-footer-height: $footer-height !default;
$navbar-footer-border-color: var(
  --#{$prefix}navbar-footer-border-color
) !default;
$navbar-vertical-height: calc(100vh - $navbar-top-height) !default;

$navbar-vertical-content-height: calc(
  100vh - var(--#{$prefix}navbar-top-height) - $navbar-vertical-footer-height
) !default;
$navbar-vertical-content-padding-x: map-get($spacers, 2) !default;
$navbar-vertical-content-padding-y: map-get($spacers, 3) !default;
$navbar-vertical-label-font-size: map-get($font-sizes, 10) !default;

$navbar-vertical-collapse-width: 4rem !default;
$navbar-vertical-link-collapse-padding-x: 1.5rem !default;
$navbar-vertical-collapse-padding-x: 2.5rem !default;
$navbar-vertical-hover-width: 12.625rem !default;
$navbar-vertical-collapsed-hover-shadow: 0.625rem 0 0.625rem -0.5625rem var(--#{$prefix}navbar-vertical-collapsed-hover-shadow-color) !default;

$navbar-vertical-border-color: var(
  --#{$prefix}navbar-vertical-border-color
) !default;
$navbar-vertical-bg-color: var(--#{$prefix}navbar-vertical-bg-color) !default;
$navbar-vertical-label-color: var(
  --#{$prefix}navbar-vertical-label-color
) !default;
$navbar-vertical-link-color: var(
  --#{$prefix}navbar-vertical-link-color
) !default;
$navbar-vertical-link-hover-color: var(
  --#{$prefix}navbar-vertical-link-hover-color
) !default;
$navbar-vertical-link-hover-bg: var(
  --#{$prefix}navbar-vertical-link-hover-bg
) !default;
$navbar-vertical-link-active-color: var(
  --#{$prefix}navbar-vertical-link-active-color
) !default;
$navbar-vertical-link-disable-color: var(
  --#{$prefix}navbar-vertical-link-disable-color
) !default;

$navbar-vertical-collapsed-menu-bg: var(
  --#{$prefix}navbar-vertical-collapsed-menu-bg
) !default;
$navbar-vertical-hr-color: var(--#{$prefix}navbar-vertical-hr-color) !default;
$navbar-vertical-dropdown-indicator-color: var(
  --#{$prefix}navbar-vertical-dropdown-indicator-color
) !default;

//*-----------------------------------------------
//|   Navbar Top
//-----------------------------------------------*/
$navbar-top-link-padding-start: 1.125rem !default;
$navbar-top-link-padding-end: 1.5rem !default;
$navbar-top-link-color: var(--#{$prefix}navbar-top-link-color) !default;

//*-----------------------------------------------
//|   Navbar dual
//-----------------------------------------------*/
$dual-nav-border-color: map-get($grays, '200') !default;
$dual-nav-first-layer-bg: map-get($grays, '100') !default;

// scss-docs-start treeview-variables
$treeview-transition-collapse: height 0.15s ease !default;
$treeview-row-bg-odd: var(--#{$prefix}secondary-bg) !default;
$treeview-row-bg-even: var(--#{$prefix}light) !default;
// scss-docs-end treeview-variables