// Loading support for light and dark colors
@mixin at-theme-backgrounds($theme) {
  $background: map-get($theme, background);
  $is-dark-theme: map-get($theme, is-dark);
  $primary: map-get($theme, primary);

  .at-bg {
    background-color: map-get($background, background);
  }

  .at-bg-accent {
    @if $is-dark-theme {
      background-color: map-get($background, card);
    } @else {
      background-color: map-get($background, app-bar);
    }
  }

  .at-fg-primary, .mat-fg-primary {
    color: map-get($primary, 500) !important;
  }
}

// Colors support for light and dark colors
@mixin at-colors-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  .mat-bg {
    background-color: map-get($background, base) !important;
  }

  .mat-fg {
    color: map-get($foreground, base) !important;
  }
}

// Sidenav support for primary, accent and warn colors
@mixin at-sidenav-theme($theme) {

  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, accent);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

  .at-sidenav {
    overflow-x: hidden;
    //background-color: map_get($background, card);

    &.at-sidenav-primary {
      background-color: map-get($primary, 400);

      &.at-sidenav-pattern-1 {
        background: url("/assets/img/backgrounds/patterns/01.png") center 0px repeat;
      }

      &.at-sidenav-pattern-2 {
        background: url("/assets/img/backgrounds/patterns/02.png") center -500px no-repeat;
      }

      &.at-sidenav-pattern-3 {
        background: url("/assets/img/backgrounds/patterns/03.png") center 0px no-repeat;
        background-size: cover;
      }
    }

  }
}

// Sidenav Item support for primary, accent and warn colors
@mixin at-sidenav-item-theme($theme) {

  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, accent);

  .at-sidenav {
    .at-sidenav-button.active {
      color: map-get($accent, 400);
    }
    &.at-sidenav-primary {
      .at-sidenav-button.active {
        color: #fefefe;
      }
    }
  }
}

// Ngx-charts support for light and dark colors
@mixin at-ngx-charts-theme($theme) {

  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  /**
   * Backgrounds
   */
  $color-bg-darkest: #13141b;
  $color-bg-darker: #1b1e27;
  $color-bg-dark: #232837;
  $color-bg-med: #2f3646;
  $color-bg-light: #455066;
  $color-bg-lighter: #5b6882;

  /**
   * Text
   */
  $color-text-dark: #72809b;
  $color-text-med-dark: #919db5;
  $color-text-med: #a8b2c7;
  $color-text-med-light: #d9dce1;
  $color-text-light: #f0f1f6;
  $color-text-lighter: #fff;

  .ngx-charts {

    text {
      fill: mat-color($foreground, secondary-text);
    }

    .tooltip-anchor {
      fill: mat-color($foreground, text);
    }

    .gridline-path {
      stroke: mat-color($foreground, divider);
    }

    .refline-path {
      stroke: mat-color($foreground, disabled);
    }

    .reference-area {
      fill: mat-color($foreground, text);
    }

    .grid-panel {
      &.odd {
        rect {
          fill: rgba(255, 255, 255, 0.05);
        }
      }
    }

    .force-directed-graph {
      .edge {
        stroke: mat-color($foreground, secondary-text);
      }
    }

    .number-card {
      p {
        fill: mat-color($foreground, secondary-text);
      }
    }

    .gauge {
      .background-arc {
        path {
          fill: mat-color($foreground, slider-off);
        }
      }

      .gauge-tick {
        path {
          stroke: mat-color($foreground, secondary-text);
        }
        text {
          fill: mat-color($foreground, text);
        }
      }
    }

    .linear-gauge {
      .background-bar {
        path {
          fill: $color-bg-med;
        }
      }

      .units {
        fill: mat-color($foreground, secondary-text);
      }
    }

    .timeline {
      .brush-background {
        fill: rgba(255, 255, 255, 0.05);
      }

      .brush {
        .selection {
          fill: rgba(255, 255, 255, 0.1);
          stroke: mat-color($foreground, secondary-text);
        }
      }
    }

    .polar-chart .polar-chart-background {
      fill: rgb(30, 34, 46);
    }

  }

  .chart-legend {
    .legend-labels {
      background: rgba(255, 255, 255, 0.05) !important;
    }

    .legend-item {
      &:hover {
        color: mat-color($foreground, text) !important;
      }
    }

    .legend-label {
      &:hover {
        color: mat-color($foreground, text) !important;
      }

      .active {
        .legend-label-text {
          color: mat-color($foreground, text) !important;
        }
      }
    }

    .scale-legend-label {
      color: mat-color($foreground, secondary-text) !important;
    }
  }

  .advanced-pie-legend {
    color: mat-color($foreground, secondary-text);

    .legend-item {
      &:hover {
        color: mat-color($foreground, secondary-text) !important;
      }
    }
  }

  .number-card .number-card-label {
    font-size: 0.8em;
    color: mat-color($foreground, secondary-text);
  }

}

// Calendar support for light and dark colors
@mixin at-calendar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .cal-month-view {

    .cal-header {

      &.cal-cell-row {
        background-color: transparent;
      }
      .cal-cell {
        background-color: transparent;
        font-weight: 500;
        text-align: right;
        margin-right: 15px;
        margin-bottom: 10px;
      }
    }

    .cal-days {
      //border: none;
      border-top: 1px solid;
      border-color: map-get($foreground, divider);

      .cal-cell-row {
        //border-bottom: none;
        border-color: map-get($foreground, divider);

        &:hover {
          background-color: transparent !important;
        }
      }
    }

    .cal-day-cell {
      transition: all ease 0.3s;
      background-color: transparent !important;

      &:not(:last-child) {
        border-color: map-get($foreground, divider);
      }
      &:hover {
        //@include mat-elevation(1);
        background-color: map-get($background, focused-button) !important;
      }

      &.cal-has-events.cal-open {
        background-color: map-get($background, raised-button) !important;
      }

      &.cal-open {
        //@include mat-elevation(3);

        .cal-day-number {
          font-weight: 600;
          //border: 2px solid;
        }
      }

      .cal-day-number {
        color: map-get($foreground, base);
      }

      &.cal-today {
        .cal-day-number {
          color: map-get($primary, 400) !important;
          opacity: 1;
        }

        background-color: transparent !important;
      }

      &.cal-weekend {
        .cal-day-number {
          color: map-get($warn, 500);
          opacity: 0.4;
        }
      }

      &.cal-out-month {
        .cal-day-number {
          opacity: 0.1;
        }
      }
    }

    .cal-cell-top {
      height: 170px;
      position: relative;
      //margin: auto;
      //margin-top: 10px;
      min-height: 80px;
    }

    .cal-open-day-events {
      background: transparent;
      box-shadow: none;

      padding: 0;
      display: flex;
      flex-direction: column;

      > div {
        padding: 0 16px;
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;

        border-bottom: 1px solid;
        border-color: map-get($foreground, divider);

        transition: box-shadow 300ms ease;

        &:hover {
          background-color: map-get($background, focused-button) !important;;
        }

        .cal-event {
          top: 0;
          margin: 0;
        }

        mwl-calendar-event-title {
          flex: 1;

          .cal-event-title {
            display: block;
            padding: 21px 24px;
            line-height: 1;
            text-decoration: none;
            color: map-get($foreground, base);
          }
        }

        mwl-calendar-event-actions {
          .cal-event-actions {
            display: flex;
            flex-direction: row;
            align-items: center;

            .cal-event-action {
              color: map-get($primary, 500);
              display: block;
              line-height: 1;
              padding: 8px;
            }
          }
        }

      }
    }

    .cal-day-badge {
      background-color: transparent;
      color: map-get($accent, 500);
    }

    .cal-events {
      //margin: auto;
      margin-bottom: 5px;
    }
  }

  .cal-week-view {

    .cal-day-headers {
      border: 1px solid map_get($foreground, divider);
      .cal-header:not(:last-child) {
        border-right: 1px solid map_get($foreground, divider);
      }
    }

    .cal-header {

      &.cal-today {
        background-color: transparent;
        > span {
          color: map_get($primary, 500);
          opacity: 1 !important;
        }
      }

      &.cal-weekend span {
        color: map_get($warn, 500);
      }

      &:hover {
        background-color: transparent !important;
      }
      &.cal-cell-row {
        background-color: transparent;
      }
      .cal-cell {
        background-color: transparent;
      }
      > b {
        font-weight: 500;
      }

    }

    .cal-event {
      display: flex;
      flex-direction: row;
      align-items: center;

      mwl-calendar-event-title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        order: 0;

        .cal-event-title {
          display: block;
          //padding: 21px 24px;
          line-height: 1;
          text-decoration: none;
          color: black;
        }
      }

      mwl-calendar-event-actions {
        order: 1;

        .cal-event-actions {
          display: flex;
          flex-direction: row;
          align-items: center;

          .cal-event-action {
            color: map-get($primary, 500);
            display: block;
            line-height: 1;
            padding: 8px;
          }
        }
      }
    }
  }

  .cal-day-view {
    .cal-hour-rows {
      border: solid 1px map-get($foreground, divider) !important;
      overflow-x: auto;
    }

    .cal-hour {
      background-color: transparent !important;
    }
    .cal-hour-segment {
      border-bottom: thin dashed map-get($foreground, divider) !important;
      &:hover {
        background-color: map-get($background, focused-button) !important;
      }

    }

    .cal-time {
      font-weight: 500;
    }

    .cal-event {
      display: flex;
      flex-direction: row;

      mwl-calendar-event-title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        order: 0;

        .cal-event-title {
          display: block;
          height: 26px;
          line-height: 26px;
          text-decoration: none;
          color: black;
        }
      }

      mwl-calendar-event-actions {
        order: 1;

        .cal-event-actions {
          display: flex;
          flex-direction: row;
          align-items: center;

          .cal-event-action {
            color: map-get($primary, 500);
            display: block;
            line-height: 1;
            padding: 4px;
          }
        }
      }
    }
  }

}

// Border support for light and dark colors
@mixin at-border-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  $border-style: 1px solid map-get($foreground, divider);

  .at-border,
  .at-b {
    border: $border-style;
  }

  .at-border-top,
  .at-bt {
    border-top: $border-style;
  }

  .at-border-right,
  .at-br {
    border-right: $border-style;
  }

  .at-border-bottom,
  .at-bb {
    border-bottom: $border-style;
  }

  .at-border-left,
  .at-bl {
    border-left: $border-style;
  }

  .at-border-horizontal,
  .at-bh {
    border-left: $border-style;
    border-right: $border-style;
  }

  .at-border-vertical,
  .at-bv {
    border-top: $border-style;
    border-bottom: $border-style;
  }
}