@mixin app-global-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  html, body {
    background-color: mat-color($background, background);
  }

}






@mixin o-container-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .o-container {

    .o-container-title-item {
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: mat-color($foreground, divider);
    }

    .container-title {
      color: mat-color($foreground, secondary-text);
    }

  }

}






@mixin o-form-toolbar-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);

  .toolbar-form-header{
    background-color: mat-color($background, app-bar);
    .mat-toolbar-tools {
      button {
        color: mat-color($primary);
      }

      md-icon {
        color: mat-color($primary);
      }

    }
  }

}




@mixin input-theme($theme) {
  $foreground: map-get($theme, foreground);
  $warn: map-get($theme, warn);

  span.icon-btn,
  .mat-input-suffix.mat-form-field-suffix .mat-icon.material-icons {
    color: mat-color($foreground, icon);

    &.mat-disabled {
      color: mat-color($foreground, disabled-text);
    }
  }

  textarea:disabled,
  input:not([type]):disabled,
  input[type="color"]:disabled,
  input[type="date"]:disabled,
  input[type="datetime"]:disabled,
  input[type="datetime-local"]:disabled,
  input[type="email"]:disabled,
  input[type="month"]:disabled,
  input[type="password"]:disabled,
  input[type="number"]:disabled,
  input[type="search"]:disabled,
  input[type="tel"]:disabled,
  input[type="text"]:disabled,
  input[type="time"]:disabled,
  input[type="url"]:disabled,
  input[type="week"]:disabled {
      color: mat-color($foreground, disabled-text);
  }

  .custom-error {

    .input-model.ng-invalid.ng-touched + md-form-field {

      .mat-input-placeholder,
      .mat-placeholder-required {
        color: mat-color($warn);
      }
      .mat-input-underline .mat-input-ripple {
        visibility: visible;
        transform: scaleX(1);
        transition: transform ($swift-ease-in-duration/2) linear,background-color $swift-ease-in-duration $swift-ease-in-timing-function;
      }
    }


    .input-model.ng-invalid.ng-touched + md-form-field,
    md-form-field.ng-invalid.ng-touched  {
      .mat-input-wrapper {
        .mat-input-underline {
          border-top-color: mat-color($warn);
          .mat-input-ripple {
            background-color: mat-color($warn);
          }
        }
        .mat-input-placeholder.mat-focused {
          color: mat-color($warn);
        }
        .mat-hint {
          color: mat-color($warn);
        }
      }
    }
  }
}







@mixin o-date-input-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);

  $color-inactive: #999999;
}


@mixin o-combo-theme($theme) {
  $foreground: map-get($theme, foreground);
  $warn: map-get($theme, warn);

  .mat-combo-container.ng-invalid.ng-touched {
    .mat-hint {
      color: mat-color($warn);
    }
  }
  .mat-select:focus:not(.mat-select-disabled).mat-warn .mat-select-underline,
  .mat-select-invalid .mat-select-underline {
      background-color: mat-color($warn)!important;
  }

}






@mixin md-dialog-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .mat-dialog {
    background-color: mat-color($background, dialog);

    &.mat-content-overflow {
      .mat-actions, md-dialog-actions {
        border-top-color: mat-color($foreground, divider);
      }
    }
  }

}






@mixin o-dialog-theme($theme) {

  $info: mat-palette($mat-light-blue);
  $warn: mat-palette($mat-amber);
  $error: mat-palette($mat-red);

  .alert-icon {
    &.info {
      color: mat-color($info);
    }
    &.warn {
      color: mat-color($warn);
    }
    &.error {
      color: mat-color($error);
    }
  }

}





@mixin o-table-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);

}



@mixin ckeditor-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);


  // Placeholder colors. Required is used for the `*` star shown in the placeholder.
  $mat-ckeditor-placeholder-color: mat-color($foreground, hint-text);
  $mat-ckeditor-floating-placeholder-color: mat-color($primary);
  $mat-ckeditor-required-placeholder-color: mat-color($accent);

  // Underline colors.
  $mat-ckeditor-underline-color: mat-color($foreground, hint-text);
  $mat-ckeditor-underline-color-accent: mat-color($accent);
  $mat-ckeditor-underline-color-warn: mat-color($warn);
  $mat-ckeditor-underline-disabled-color: mat-color($foreground, hint-text);
  $mat-ckeditor-underline-focused-color: mat-color($primary);


  .mat-ckeditor-placeholder {
    color: $mat-ckeditor-placeholder-color;

    transform: translateY(0);
    transform-origin: bottom left;
    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
                scale $swift-ease-out-duration $swift-ease-out-timing-function,
                color $swift-ease-out-duration $swift-ease-out-timing-function,
                width $swift-ease-out-duration $swift-ease-out-timing-function;

    // :focus is applied to the combo, but we apply mat-focused to the other elements
    // that need to listen to it.
    &.mat-focused {
      color: $mat-ckeditor-floating-placeholder-color;

      &.mat-accent {
        color: $mat-ckeditor-underline-color-accent;
      }
      &.mat-warn {
        color: $mat-ckeditor-underline-color-warn;
      }
    }
  }


  // See mat-ckeditor-placeholder-floating mixin in combo.scss
  ckeditor:-webkit-autofill + .mat-ckeditor-placeholder,
  .mat-ckeditor-placeholder.mat-float:not(.mat-empty), .mat-ckeditor-placeholder.mat-float.mat-focused {

    .mat-placeholder-required {
      color: $mat-ckeditor-required-placeholder-color;
    }
  }

  .mat-ckeditor-underline {
    border-color: $mat-ckeditor-underline-color;

    .mat-ckeditor-ripple {
      background-color: $mat-ckeditor-underline-focused-color;

      transform-origin: top;
      transform: scaleY(0);
      transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
                  opacity $swift-ease-out-duration $swift-ease-out-timing-function;

      &.mat-accent {
        background-color: $mat-ckeditor-underline-color-accent;
      }
      &.mat-warn {
        background-color: $mat-ckeditor-underline-color-warn;
      }
    }
  }

  .mat-ckeditor {
    &.ng-invalid.ng-touched {
      .mat-ckeditor-underline {
        border-top-color: $mat-ckeditor-underline-color-warn;
        .mat-ckeditor-ripple {
          background-color: $mat-ckeditor-underline-color-warn;
        }
      }
      .mat-ckeditor-placeholder.mat-focused {
        color: $mat-ckeditor-underline-color-warn;
      }
      .mat-hint {
        color: $mat-ckeditor-underline-color-warn;
      }
    }
  }

}




@mixin o-list-theme($theme) {
  $foreground: map-get($theme, foreground);

  .o-list-container {

    .primary-text {
      color: mat-color($foreground, text);
    }

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

    .o-list-row-action .mat-checkbox-inner-container,
    .o-list-item-icon {
      color: mat-color($foreground, icon);
    }
  }
}


@mixin o-list-picker-theme($theme) {

  o-list-picker-dialog  md-toolbar  o-search-input {
      font-size: 16px;

      &.list-picker-search .mat-input-placeholder,
      span.icon-btn {
          color:  mat-color($primary, default-contrast);
      }
      &.list-picker-search .mat-input-underline {
          border-color: mat-color($primary, default-contrast, 0.78);
          .mat-input-ripple {
              background-color: mat-color($primary, default-contrast);
          }
      }
  }

}

@mixin o-app-header-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);

  .o-app-header {
    .application-header {
      .sidenav-toggle {
        color: mat-color($primary, default-contrast);
        background: mat-color($primary);
      }
      .menu-button {
        background: transparent;
      }
    }
  }
}



@mixin o-app-sidenav-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);

  .o-app-sidenav {

    .application-sidenav-sidenav {

      background: mat-color($primary);
      .application-sidenav-item {
        cursor: pointer;
        border-color: mat-color($primary, default-contrast, 0.12);
        color: mat-color($primary, default-contrast, 0.54);

        .application-sidenav-viewer-sidenav-item-selected {
           color: mat-color($accent);
        }

        > a.is-selected,
        > a:hover,
        > a:focus,
        &:hover,
        &:focus {
          // background: mat-color($primary, 700);
          color: mat-color($accent);
        }
      }

      .application-sidenav-menugroup.active {
        background: mat-color($primary, 900);
        color: mat-color($primary, default-contrast);

        + .application-sidenav-menugroup-items-container ul {
          background: rgba(0, 0, 0, 0.1);
          box-shadow: 6px 4px 36px -12px  $black-87-opacity inset;
        }
      }

      li a {
        color: inherit;
      }
    }
  }
}


// Create a theme.
@mixin o-app-layout-theme($theme) {


}


// Create a theme.
@mixin o-material-theme($theme) {
  @include app-global-theme($theme);
  @include md-dialog-theme($theme);
  @include o-container-theme($theme);
  @include o-form-toolbar-theme($theme);
  @include input-theme($theme);
  @include o-date-input-theme($theme);
  @include o-combo-theme($theme);
  @include o-dialog-theme($theme);
  @include o-table-theme($theme);
  @include ckeditor-theme($theme);
  @include o-list-theme($theme);
  @include o-list-picker-theme($theme);
  @include o-app-header-theme($theme);
  @include o-app-sidenav-theme($theme);
  @include o-app-layout-theme($theme);
}