@use '@angular/material' as mat;
@use "sass:math";
@import "@angular/material/theming";

//*
//* Typography
//*

$typography-config: mat.define-typography-config() !default;

//*
//* Defaults
//*

//* Spacer default value (part of sizing)
$spacer: 16px !default;

//* Transitions
$hover-transition-duration: 0.15s !default;
$icon-rotate-transition-duration: 0.13s !default;

// The default animation curves used by material design.
$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;

$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;

$swift-ease-out-duration: 400ms !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;

$swift-ease-in-duration: 300ms !default;
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;

$swift-ease-in-out-duration: 500ms !default;
$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;

$swift-linear-duration: 80ms !default;
$swift-linear-timing-function: linear !default;
$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;

//*
//* Layout
//*

//* Transitions (SHELL)
$shell-transition-duration: 0.28s !default;

//* Content (SHELL)
$content-padding: 24px !default;

//* Header (SHELL)
$mini-fab-size: 40px !default;
$topbar-height: 53px !default;
$actionbar-height: 54px !default;
$header-height: calc(#{$topbar-height} + #{$actionbar-height}) !default;
$header-height-mobile: calc(#{$mini-fab-size} + #{$content-padding}) !default;

//* Sidebar (SHELL)
$sidebar-condensed-width: 73px !default;
$sidebar-wide-width: 251px !default;

// padding left = 24px // padding right = 8px // margin between logo and button = 8px // button width = 40px
$brand-width: calc(#{$sidebar-wide-width} - (24px + 8px + 8px + 40px)) !default;

// padding-left = 24px // leading icon = 24px // trailing icon = 18px // padding-right = 8px
$nav-link-title-default-width: calc(
  #{$sidebar-wide-width} - (24px + 24px + 18px + 8px)
) !default;

$sublist-offset: 8px !default;
$nav-link-title-lvl-1-width: calc(
  #{$nav-link-title-default-width} - #{$sublist-offset}
) !default;
$nav-link-title-lvl-2-width: calc(
  #{$nav-link-title-default-width} - (#{$sublist-offset} * 2)
) !default;
$nav-link-title-lvl-3-width: calc(
  #{$nav-link-title-default-width} - (#{$sublist-offset} * 3)
) !default;

//* Actionbar (SHELL)
$actionbar-button-spacing: 8px !default;

//* App Background
$mat-app-background: #eeeeee !default;

//* Overview page
$sidenav-aside-width: 260px !default;

//* Section indicator
$section-indicator-width: 64px !default;

//* Spacing
//*
//* Control the default styling of most Bootstrap elements by modifying these
//* variables. Mostly focused on spacing.
//* You can add more entries to the $spacers map, should you need more variation.

// $spacer: 16px !default; //? now defined at top of document
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: (
  0: 0,
  1: (
    $spacer * 0.25,
  ),
  2: (
    $spacer * 0.5,
  ),
  3: $spacer,
  4: (
    $spacer * 1.5,
  ),
  5: (
    $spacer * 3,
  ),
) !default;

// This variable affects the `.h-*` and `.w-*` classes.

// stylelint-disable-next-line scss/dollar-variable-default
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%,
  auto: auto,
) !default;

//*
//* Grid
//*

$grid-column-count: 12 !default;
$grid-gap: 16px !default;

//* Grid breakpoints
//*
//* Define the minimum dimensions at which your layout will change,
//* adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 960px,
  lg: 1280px,
  xl: 1600px,
  xxl: 1920px,
) !default;

//*
//* Utilities
//*

$displays: none, inline, inline-block, block, table, table-row, table-cell, grid,
  inline-grid, flex, inline-flex !default;
$overflows: auto, hidden !default;
$positions: static, relative, absolute, fixed, sticky !default;

$border-width: 1px !default;

// $border-radius:               .25rem !default;
// $border-radius-lg:            .3rem !default;
// $border-radius-sm:            .2rem !default;

//* Z-index master list
//
//? imported from bootstrap
//! Warning: Avoid customizing these values. They're used for a bird's eye view
//! of components dependent on the z-axis and are designed to all work together.

// todo: implement materials z-index values

// $zindex-dropdown:                   1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
// $zindex-modal-backdrop:             1040 !default;
// $zindex-modal:                      1050 !default;
// $zindex-popover:                    1060 !default;
// $zindex-tooltip:                    1070 !default;

//*
//* Flex basis sizes
//* 

$flex-basis-sizes: (
  40: 40px,
  60: 60px,
  80: 80px,
  100: 100px,
  120: 120px,
  140: 140px,
  160: 160px,
  180: 180px,
  200: 200px,
  220: 220px,
  240: 240px,
  260: 260px,
  280: 280px,
  300: 300px,
  320: 320px,
  340: 340px,
  360: 360px,
  380: 380px,
  400: 400px,
  auto: auto,
) !default;

//*
//* Components
//*

//* SC Table
$sc-table-top-bar-spacing-x: 16px !default;
$sc-table-top-bar-spacing-y: 16px !default;

//* Card
$card-padding: 16px !default;
$card-border-radius: 8px !default;

//* Dialog
$dialog-border-radius: $card-border-radius !default;
$dialog-padding: 24px !default;
$dialog-header-height: 57px !default;
$dialog-footer-height: 53px !default;

//* Buttons
$button-border-radius: 8px !default;

//* Form Fields
$form-field-border-radius: 8px !default;
$mat-form-field-flex-height: 56px !default;

//* Lists
$list-inline-padding: 8px !default;

//* Alerts
$alert-border-radius: $card-border-radius;
$alert-padding-y: 12px !default;
$alert-padding-x: 16px !default;

//* Dropzone
$dropzone-border-radius: 4px;
$dropzone-padding: 16px;

//* WYSYWIG
$wysywig-border-radius: $form-field-border-radius;

//* Comments
$comments-wrapper-padding: $card-padding;
$comments-wrapper-gap: $comments-wrapper-padding;
$comments-card-padding: 8px;
$comments-card-border-radius: 8px;
$comments-card-header-pic-width: 40px;

//* Toasts
//? Outer Container
$sc-toast-padding-y:              14px !default;
$sc-toast-padding-x:              16px !default;
$sc-toast-min-height:             48px !default;
$sc-toast-min-width:              344px !default;
$sc-toast-max-width:              33vw !default;
$sc-toast-spacing-margin:         24px !default;
$sc-toast-spacing-margin-handset: 8px !default;
//? Inner Content
$sc-toast-line-height:            20px !default;
$sc-toast-icon-button-height:     40px !default;
$sc-toast-button-height:          36px !default;
$sc-toast-button-margin-x:        8px !default;
//? Button vertical margin (y) is used to ensure that a button height of 36px, when the containing
//? space falls below 36px.
$sc-toast-button-margin-y:         (math.div($sc-toast-button-height - $sc-toast-line-height, 2) * -1) !default;
// $sc-toast-button-margin-y:         -(($sc-toast-button-height - $sc-toast-line-height) / 2) !default;
// //? Button vertical margin is used to ensure that a ICON-button height of 36px, when the containing
// //? space falls below 36px.
$sc-toast-icon-button-margin-y:    (math.div($sc-toast-icon-button-height - $sc-toast-line-height, 2) * -1) !default;
// $sc-toast-icon-button-margin-y:    -(($sc-toast-icon-button-height - $sc-toast-line-height) / 2) !default;

//* Image Gallery
$pic-gallery-height-xs:                     calc(var(--app-height, 100vh) - #{$mini-fab-size} - (#{$content-padding} * 3) - #{$actionbar-height}) !default;
$pic-gallery-height-sm:                     calc(var(--app-height, 100vh) - #{$header-height}) !default;
$pic-gallery-grid-gap:                      $grid-gap !default;
$pic-gallery-tags-nav-border-radius:        24px !default;
$pic-gallery-tags-nav-transition-duration:  $shell-transition-duration !default;
$image-card-info-padding:                   $card-padding !default;
$image-card-border-radius:                  $card-border-radius !default;

//* Slide Button Toggle Group

$sc-sbtg-button-active-background-offset:   4px !default;
$sc-sbtg-transition-duration:               $swift-ease-in-out-duration !default;
$sc-sbtg-transition-timing-function:        $swift-ease-in-out-timing-function !default;
$sc-sbtg-transition:                        all $sc-sbtg-transition-duration $sc-sbtg-transition-timing-function !default;


//ICON FONT


//? we only use rounded icons
//todo: we should download the font frequently from here (change "v107" in URL) https://fonts.gstatic.com/s/materialiconsround/v106/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2

// $icon-font-url: url("../../../../../src/assets/mat-icon-font/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2")
//   format("woff2") !default;

$icon-font-url: url(https://fonts.gstatic.com/s/materialiconsround/v107/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2)
  format("woff2") !default;

//? not used
// Default
// $icon-font-url: url(https://fonts.gstatic.com/s/materialicons/v53/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2') !default;

// Outlined
// $icon-font-url: url(https://fonts.gstatic.com/s/materialiconsoutlined/v22/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2') !default;
// Rounded

// Sharp
//$icon-font-url: url(https://fonts.gstatic.com/s/materialiconssharp/v23/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2) format('woff2') !default;

// Two-Tone
//$icon-font-url: url(https://fonts.gstatic.com/s/materialiconstwotone/v21/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2) format('woff2') !default;