/*
*
*  Responsive attributes
*
*  References:
*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
*  2) https://css-tricks.com/almanac/properties/f/flex/
*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
*  5) http://godban.com.ua/projects/flexgrid
*
*/

// Layout
// ------------------------------
@use "sass:math";
$baseline-grid: 8px !default;
$layout-gutter-width: ($baseline-grid * 2) !default;

@mixin layout-padding-margin() {

  [layout-padding]>[flex-sm],
  [layout-padding]>[flex-lt-md] {
    padding: calc($layout-gutter-width / 4);
  }

  [layout-padding],
  [layout-padding]>[flex],
  [layout-padding]>[flex-gt-sm],
  [layout-padding]>[flex-md],
  [layout-padding]>[flex-lt-lg] {
    padding: calc($layout-gutter-width / 2);
  }

  [layout-padding]>[flex-gt-md],
  [layout-padding]>[flex-lg] {
    padding: $layout-gutter-width
  }

  [layout-margin]>[flex-sm],
  [layout-margin]>[flex-lt-md] {
    margin: calc($layout-gutter-width / 4);
  }

  [layout-margin],
  [layout-margin]>[flex],
  [layout-margin]>[flex-gt-sm],
  [layout-margin]>[flex-md],
  [layout-margin]>[flex-lt-lg] {
    margin: calc($layout-gutter-width / 2);
  }

  [layout-margin]>[flex-gt-md],
  [layout-margin]>[flex-lg] {
    margin: $layout-gutter-width;
  }

    [layout-wrap] {
      flex-wrap: wrap;
    }

    [layout-nowrap] {
      flex-wrap: nowrap;
    }
  }

  @include layout-padding-margin();
$display-1-font-size-base: 3.400rem !default;
$display-4-font-size-base: 11.20rem !default;
$display-3-font-size-base: 5.600rem !default;
$display-2-font-size-base: 4.500rem !default;

$headline-font-size-base: 2.400rem !default;
$title-font-size-base: 2.000rem !default;
$subhead-font-size-base: 1.600rem !default;

// $body-font-size-base: rem(1.400) !default;
$caption-font-size-base: 1.200rem !default;

// Layout
// $baseline-grid: 8px !default;
$layout-breakpoint-xs: 600px !default;
$layout-breakpoint-sm: 600px !default;
$layout-breakpoint-md: 960px !default;
$layout-breakpoint-lg: 1280px !default;
// $layout-gutter-width: ($baseline-grid * 2) !default;

// Typography
// $mat-body-font-size-base: rem(1.400) !default;

// App bar variables
// $app-bar-height: 64px;

// Icons
// $icon-size: rem(2.4);

// // Toast
// $toast-height: $baseline-grid * 3 !default;
// $toast-margin: $baseline-grid * 1 !default;


// Z-indexes
// $z-index-tooltip: 100 !default;
// $z-index-toast: 90 !default;
// $z-index-bottom-sheet: 70 !default;
$z-index-scroll-mask: 65 !default;
// $z-index-sidenav: 60 !default;
// $z-index-toolbar: 30 !default;
// $z-index-fab: 20 !default;
// $z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome


html, body {
  height: 100%;
  position: relative;
}

body {
  margin: 0;
  padding: 0;
}

[tabindex='-1']:focus {
  outline: none;
}

.inset {
  padding: 10px;
}

button.mat-no-style {
  font-weight: normal;
  background-color: inherit;
  text-align: left;
  border: none;
  padding: 0;
  margin: 0;
}

select,
button,
textarea,
input {
  vertical-align: baseline;
}

// Fix Android 4.0 button bugs
input[type="reset"],
input[type="submit"],
html input[type="button"],
button {
  cursor: pointer;
  -webkit-appearance: button;

  &[disabled] {
    cursor: default;
  }
}

textarea {
  vertical-align: top;
  overflow: auto;
}

input {
  &[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }
  }
}

.mat-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 1px;
}

.mat-shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  pointer-events: none;
}

.mat-shadow-bottom-z-1 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.mat-shadow-bottom-z-2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

.mat-shadow-animated.mat-shadow {
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}


.mat-padding {
  padding: 8px;
}

.mat-margin {
  margin: 8px;
}

.mat-scroll-mask {
  position: absolute;
  background-color: transparent;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  > .mat-scroll-mask-bar {
    display: block;
    position: absolute;
    background-color: #fafafa;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: $z-index-scroll-mask;
    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3)
  }
}

.mat-no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: $layout-breakpoint-sm) {
  .mat-padding {
    padding: 16px;
  }
}

// Global page styles
//
// [2] Ensure the page always fills at least the entire height of the viewport.
// [3] Prevent iOS text size adjust after orientation change, without disabling user zoom
// [4] Fonts on OSX will look more consistent with other systems that do not
// render text using sub-pixel anti-aliasing.
$display-1-font-size-base: 3.400rem !default;
$display-4-font-size-base: 11.20rem !default;
$display-3-font-size-base: 5.600rem !default;
$display-2-font-size-base: 4.500rem !default;

$headline-font-size-base: 2.400rem !default;
$title-font-size-base: 2.000rem !default;
$subhead-font-size-base: 1.600rem !default;

// $body-font-size-base: rem(1.400) !default;
$caption-font-size-base: 1.200rem !default;

// Layout
// $baseline-grid: 8px !default;
$layout-breakpoint-xs: 600px !default;
$layout-breakpoint-sm: 600px !default;
$layout-breakpoint-md: 960px !default;
$layout-breakpoint-lg: 1280px !default;
// $layout-gutter-width: ($baseline-grid * 2) !default;

// Typography
// $mat-body-font-size-base: rem(1.400) !default;

// App bar variables
// $app-bar-height: 64px;

// Icons
// $icon-size: rem(2.4);

// // Toast
// $toast-height: $baseline-grid * 3 !default;
// $toast-margin: $baseline-grid * 1 !default;


// Z-indexes
// $z-index-tooltip: 100 !default;
// $z-index-toast: 90 !default;
// $z-index-bottom-sheet: 70 !default;
$z-index-scroll-mask: 65 !default;
// $z-index-sidenav: 60 !default;
// $z-index-toolbar: 30 !default;
// $z-index-fab: 20 !default;
// $z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome


html, body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;

  min-height: 100%; // [2]

  -webkit-text-size-adjust: 100%; // [3]
  -ms-text-size-adjust: 100%; // [3]

  -webkit-font-smoothing: antialiased; // [4]
  -moz-osx-font-smoothing: grayscale; // [4]
}


/************
 * Headings
 ************/
.mat-headline-1 {
  font-size: $display-4-font-size-base;
  font-weight: 300;
  letter-spacing: -0.010em;
  line-height: $display-4-font-size-base;
}

.mat-headline-2 {
  font-size: $display-3-font-size-base;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: $display-3-font-size-base;
}

.mat-headline-3 {
  font-size: $display-2-font-size-base;
  font-weight: 400;
  line-height: 6.4rem;
}

.mat-headline-4 {
  font-size: $display-1-font-size-base;
  font-weight: 400;
  line-height: 4rem;
}

.mat-headline-5 {
  font-size: $headline-font-size-base;
  font-weight: 400;
  line-height: 3.2rem;
}


.mat-caption {
  font-size: $caption-font-size-base;
  letter-spacing: 0.020em;
}

.mat-mdc-button {
  letter-spacing: 0.010em;
}

/************
 * Defaults
 ************/

select,
button,
textarea,
input {
  font-size: 100%;
}

/************
 * ICONS
 ************/

 .material-icons{
  font-feature-settings:"liga"
 }

$display-1-font-size-base: 3.400rem !default;
$display-4-font-size-base: 11.20rem !default;
$display-3-font-size-base: 5.600rem !default;
$display-2-font-size-base: 4.500rem !default;

$headline-font-size-base: 2.400rem !default;
$title-font-size-base: 2.000rem !default;
$subhead-font-size-base: 1.600rem !default;

// $body-font-size-base: rem(1.400) !default;
$caption-font-size-base: 1.200rem !default;

// Layout
// $baseline-grid: 8px !default;
$layout-breakpoint-xs: 600px !default;
$layout-breakpoint-sm: 600px !default;
$layout-breakpoint-md: 960px !default;
$layout-breakpoint-lg: 1280px !default;
// $layout-gutter-width: ($baseline-grid * 2) !default;

// Typography
// $mat-body-font-size-base: rem(1.400) !default;

// App bar variables
// $app-bar-height: 64px;

// Icons
// $icon-size: rem(2.4);

// // Toast
// $toast-height: $baseline-grid * 3 !default;
// $toast-margin: $baseline-grid * 1 !default;


// Z-indexes
// $z-index-tooltip: 100 !default;
// $z-index-toast: 90 !default;
// $z-index-bottom-sheet: 70 !default;
$z-index-scroll-mask: 65 !default;
// $z-index-sidenav: 60 !default;
// $z-index-toolbar: 30 !default;
// $z-index-fab: 20 !default;
// $z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome


.o-column,
.o-row {
  display: block;

  &[class*="mat-elevation-z"] {
    margin: 8px 0;
  }

  &[class*="o-appearance-outline"] {
    box-shadow: none;
  }

  &[class*="o-appearance-outline-title"] {
    margin: 16px 0 8px;
  }

  > .o-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .o-container-title {
      cursor: default;
      margin: 0 4px;
      height: 39px;
      line-height: 39px;
      border-bottom-width: 1px;
      border-bottom-style: solid;

      span {
        padding-left: 8px;
      }
    }

    .o-container-scroll {
      overflow: auto;
      height: 100%;

      &.o-container-gap {
        padding: 24px 30px 8px;
      }
    }
  }

  &.o-appearance-outline {
    position: relative;
    > .o-container {
      .o-container-title {
        position: absolute;
        border-bottom: 0;
        transform: translate(0, -50%);
        margin-left: 18px;
      }
    }

    .o-container-outline {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;

      .o-container-outline-end,
      .o-container-outline-start {
        min-width: 5px;
        border-width: 1px;
        border-top-style: solid;
        border-bottom-style: solid;
      }

      .o-container-outline-start {
        border-radius: 5px 0 0 5px;
        border-left-style: solid;
        border-right-style: none;
      }

      .o-container-outline-end {
        flex-grow: 1;
        border-radius: 0 5px 5px 0;
        border-left-style: none;
        border-right-style: solid;
      }

      .o-container-outline-gap {
        border-width: 1px;
        border-top-style: none;
        border-bottom-style: solid;
        border-left-style: none;
        border-right-style: none;
      }
    }
  }
}

/* Legacy Firefox implementation treats all flex containers as inline-block elements. */
@-moz-document url-prefix() {
  .o-column .o-container,
  .o-row .o-container {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.o-column-collapsible,
.o-row-collapsible {
  box-sizing: content-box;
  display: block;

  &[class*="mat-elevation-z"] {
    margin: 8px 0;
  }

  &[class*="o-appearance-outline"] {
    box-shadow: none;
  }

  &[class*="o-appearance-outline-title"] {
    margin: 16px 0 8px;
  }

  > .o-container {
    &.mat-expansion-panel {
      height: 100%;

      &:not([class*='mat-elevation-z']) {
        box-shadow: none;
      }

      &:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-keyboard-focused,
      &:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']).cdk-program-focused,
      &:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
        background: transparent;
      }

      &:not(.mat-expanded) .mat-expansion-panel-header {
        border: none;
      }

      .mat-expansion-panel-header {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-radius: 0;
        margin: 0 4px;
        padding-left: 8px;

        .mat-expansion-panel-header-title span {
          padding-left: 8px;
        }

        .mat-expansion-indicator::after {
          transform: rotate(45deg) translateY(-2px) translateX(-2px);
        }
      }

      .mat-expansion-panel-content {
        font-style: inherit;
        font-variant-ligatures: inherit;
        font-variant-caps: inherit;
        font-variant-numeric: inherit;
        font-variant-east-asian: inherit;
        font-weight: inherit;
        font-stretch: inherit;
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        height: 100%;

        .mat-expansion-panel-body {
          height: 100%;
          padding: 0;

          > .o-container-scroll {
            overflow: auto;
            padding: 24px 30px 8px;
          }
        }
      }
    }
  }

  &.o-appearance-outline {
    position: relative;

    > .o-container {
      .mat-expansion-panel-header {
        border-bottom: 0;
        left: 0;
        margin-left: 18px;
        padding-left: 8px;
        position: absolute;
        right: 0;
        transform: translate(0, -50%);
        top: 0;
        z-index: 1;
      }
    }

    .o-container-outline {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &:not(.o-container-outline-expanded) .o-container-outline-end,
      &:not(.o-container-outline-expanded) .o-container-outline-gap-description,
      &:not(.o-container-outline-expanded) .o-container-outline-gap-empty1,
      &:not(.o-container-outline-expanded) .o-container-outline-gap-empty2,
      &:not(.o-container-outline-expanded) .o-container-outline-gap-icon,
      &:not(.o-container-outline-expanded) .o-container-outline-gap-title,
      &:not(.o-container-outline-expanded) .o-container-outline-start {
        border-bottom-style: none;
      }

      &.o-container-outline-expanded {
        z-index: -1;
      }

      .o-container-outline-end,
      .o-container-outline-start {
        border-top-style: solid;
        border-bottom-style: solid;
        border-width: 1px;
        min-width: 5px;
      }

      .o-container-outline-start {
        width: 12px;
        border-radius: 5px 0 0 5px;
        border-left-style: solid;
        border-right-style: none;
      }

      .o-container-outline-end {
        width: 18px;
        border-radius: 0 5px 5px 0;
        border-left-style: none;
        border-right-style: solid;
      }

      .o-container-outline-gap-empty1,
      .o-container-outline-gap-empty2 {
        border-width: 1px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-left-style: none;
        border-right-style: none;
      }

      .o-container-outline-gap-empty2 {
        flex-grow: 1;
      }

      .o-container-outline-gap-description,
      .o-container-outline-gap-icon,
      .o-container-outline-gap-title {
        border-width: 1px;
        border-top-style: none;
        border-bottom-style: solid;
        border-left-style: none;
        border-right-style: none;
      }

      .o-container-outline-gap-icon {
        width: 25px;
      }
    }
  }
}

div.icon-btn {
  cursor: default;
  display: inline-block;

  i {
    padding-top: 4px;
  }
}

$suffix-size: 20px;
$width24: 24px;

.o-tooltip.mat-mdc-tooltip {

  &.after,
  &.right {
    margin-left: 5px;
  }

  &.before,
  &.left {
    margin-right: 5px;
  }

  &.above {
    margin-bottom: -15px;
  }

  &.below {
    margin-top: -15px;
  }

  &.o-mat-error {
    white-space: pre-line;
  }
}

.mat-mdc-form-field {
  .mat-mdc-form-field-flex {

    .mat-mdc-form-field-icon-prefix,
    .mat-mdc-form-field-icon-suffix {
      display: inherit;
      align-items: center;

      &:last-child {
        padding-right: 6px;
      }

      mat-icon {
        font-size: $suffix-size;
        width: $suffix-size;
        height: $suffix-size;
        line-height: $suffix-size;
        padding: 0;
      }

      .mat-mdc-icon-button {
        line-height: $suffix-size;
        width: $suffix-size;
        height: $suffix-size;
        svg,
        img,
        .mat-mdc-button-touch-target {
          width: 20px;
          height: 20px;
        }
      }

      .svg-icon>svg {
        padding: 3px 0;
        box-sizing: border-box;
        width: $suffix-size;
      }


    }
  }

  input:read-only {
    cursor: default;
  }

  &.custom-width .mat-mdc-form-field-infix {
    width: auto;
  }

  &.icon-field {
    height: $width24;

    .mat-mdc-form-field-icon-suffix {
      cursor: default;
      text-align: center;

      .icon-btn,
      .mat-icon,
      .mat-mdc-icon-button .mat-icon {
        vertical-align: baseline;
      }

      .mat-mdc-icon-button {

        svg,
        img {
          width: $suffix-size;
          height: $suffix-size;
        }
      }


      .mat-mdc-icon-button .mat-mdc-button-touch-target {
        height: $suffix-size;
        width: $suffix-size;
      }

      .svg-icon>svg {
        padding: 3px 0;
        box-sizing: border-box;
      }
    }
  }
}

$mat-button-line-height: 32px;
$mat-menu-item-height: 32px;
$mat-calendar-prev-next-icon-margin: 11.5px;
$mat-stroked-button-line-height: $mat-button-line-height - 2;

.relative {
  position: relative;
}

.o-dialog-class,
.o-form-layout-dialog-overlay,
.o-list-picker-dialog {
  .mat-mdc-dialog-container {
    .mat-mdc-dialog-surface {
      padding: 24px 32px;
      border-radius: 2px;


      .mat-mdc-dialog-title {
        cursor: default;
        padding: 0 0 8px;
        margin: 0;

        &::before {
          height: auto;
        }
      }

      .mat-mdc-dialog-content {
        padding: 16px 0;
        margin: 0;

        .mat-mdc-subheader {
          cursor: default;
          padding: 0 0 24px;

          &.inner-subheader {
            padding: 0;
          }

          +.mat-mdc-selection-list[dense] {
            margin-top: -12px;
          }
        }

        form {
          >*:not(:last-child) {
            margin-bottom: 18px;
          }
        }

      }

      .mat-mdc-dialog-actions {
        padding: 16px 0 0 0;
        min-height: 0;

        button {
          min-width: 104px;
        }
      }
    }
  }

}

.fill-remaining {
  flex: 1 1 auto;
}

.display-none {
  display: none;
}

.visibility-hidden {
  visibility: hidden;
}

$steps: 6;

@mixin padding-margin-x {
  @for $i from 1 through $steps {
    $val: $i * 4;

    .vertical-padding-#{$val} {
      padding-top: $val * 1px;
      padding-bottom: $val * 1px;
    }

    .horizontal-padding-#{$val} {
      padding-left: $val * 1px;
      padding-right: $val * 1px;
    }

    .vertical-margin-#{$val} {
      margin-top: $val * 1px;
      margin-bottom: $val * 1px;
    }

    .horizontal-margin-#{$val} {
      margin-left: $val * 1px;
      margin-right: $val * 1px;
    }
  }
}

@include padding-margin-x();

button.mat-mdc-button-base {

  &.mat-mdc-button,
  &.mat-mdc-unelevated-button,
  &.mat-mdc-raised-button,
  &.mat-mdc-outlined-button {
    min-width: 112px;
  }

  &.mat-mdc-button,
  &.mat-mdc-unelevated-button,
  &.mat-mdc-icon-button,
  &.mat-mdc-raised-button,
  &.mat-mdc-outlined-button {
    height: $mat-button-line-height;
    line-height: $mat-button-line-height;

    .mat-mdc-button-touch-target {
      height: $mat-button-line-height;
    }

    >.mat-icon {
      line-height: 1;
    }
  }

  &.mat-mdc-outlined-button {
    height: $mat-button-line-height;
    line-height: $mat-stroked-button-line-height;
  }

  &.mat-mdc-icon-button {
    width: $mat-button-line-height;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .mat-mdc-button-touch-target {
      width: $mat-button-line-height;
    }
  }
}




/*MAT MENU*/
.o-mat-menu.mat-mdc-menu-panel {
  .mat-mdc-menu-item {
    line-height: $mat-menu-item-height;
    height: $mat-menu-item-height;
    min-height: $mat-menu-item-height;
  }
}

.overlay-ref-display-none .cdk-overlay-pane.o-context-menu {
  display: none;
}