@mixin arrow-down ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-top: $side_length solid $color;
}

@mixin arrow-up ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-bottom: $side_length solid $color;
}

@mixin standard-animation-curve() {
  transition-timing-function: cubic-bezier(.25, .8, .25, 1);
}

@function get-text-color($color, $light_color, $dark_color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);

  @return if($red * 0.299 + $green * 0.587 + $blue * 0.114 > 186, $dark_color, $light_color);
}


@mixin button-theme($theme) {
  $font-primary: map-get($theme, font-primary);
  $font-weight-normal: map-get($theme, font-weight-normal);

  $text-primary: map-get($theme, text-primary);
  $text-alternative: map-get($theme, text-alternative);

  $button-neutral: map-get($theme, button-neutral);
  $button-positive: map-get($theme, button-positive);
  $button-negative: map-get($theme, button-negative);

  $text-neutral: get-text-color($button-neutral, $text-alternative, $text-primary);
  $text-positive: get-text-color($button-positive, $text-alternative, $text-primary);
  $text-negative: get-text-color($button-negative, $text-alternative, $text-primary);

  .mcrai-button {
    background-color: transparent;
    color: $text-primary;
    font-family: $font-primary;
    font-weight: $font-weight-normal;

    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }

  .mcrai-button--disabled {
    opacity: 0.5;
  }

  .mcrai-button--neutral {
    background-color: $button-neutral;
    color: $text-neutral;

    &:hover {
      background-color: darken($button-neutral, 10);
    }
  }

  .mcrai-button--positive {
    background-color: $button-positive;
    color: $text-positive;

    &:hover {
      background-color: darken($button-positive, 10);
    }
  }

  .mcrai-button--negative {
    background-color: $button-negative;
    color: $text-negative;

    &:hover {
      background-color: darken($button-negative, 10);
    }
  }
}

@mixin arrow-down ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-top: $side_length solid $color;
}

@mixin arrow-up ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-bottom: $side_length solid $color;
}

@mixin standard-animation-curve() {
  transition-timing-function: cubic-bezier(.25, .8, .25, 1);
}


@mixin icon-button-theme($theme) {
  $font-primary: map-get($theme, font-primary);
  $font-weight-normal: map-get($theme, font-weight-normal);

  $text-primary: map-get($theme, text-primary);

  .mcrai-icon-button {
    background-color: transparent;

    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }

  .mcrai-icon-button--disabled {
    opacity: 0.5;
  }
}

@mixin icon-theme2($theme) {
  $text-primary:      map-get($theme, text-primary);
  $text-secondary:    map-get($theme, text-secondary);
  $text-alternative:  map-get($theme, text-alternative);

  .mcrai-icon { }

  .mcrai-icon--primary {
    color: $text-primary;
  }

  .mcrai-icon--secondary {
    color: $text-secondary;
  }

  .mcrai-icon--alternative {
    color: $text-alternative;
  }
}

@mixin arrow-down ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-top: $side_length solid $color;
}

@mixin arrow-up ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-bottom: $side_length solid $color;
}

@mixin standard-animation-curve() {
  transition-timing-function: cubic-bezier(.25, .8, .25, 1);
}


@mixin panel-theme($theme) {
  $text-primary: map-get($theme, text-primary);

  $line-primary: map-get($theme, line-primary);

  $panel-primary: map-get($theme, panel-primary);
  $panel-secondary: map-get($theme, panel-secondary);

  .mcrai-panel {
    background-color: $panel-primary;
  }

  .mcrai-panel--primary {
    background-color: $panel-primary;
  }

  .mcrai-panel--secondary {
    background-color: $panel-secondary;
  }

  .mcrai-panel__header {
    border-bottom: 1px solid $line-primary;
  }

  .mcrai-panel__arrow {
    @include arrow-down(7px, $text-primary);
  }

  .mcrai-panel__header,
  .mcrai-panel__content,
  .mcrai-panel__footer,
  .mcrai-panel__actions {
    border: 1px solid $line-primary;
  }

  .mcrai-panel__actions[top] {
    border-bottom: 0;
  }

  .mcrai-panel--highlight.mcrai-panel,
  .mcrai-panel--highlight.mcrai-panel--primary {
    background-color: darken($panel-primary, 10);
  }

  .mcrai-panel--highlight.mcrai-panel--secondary {
    background-color: darken($panel-secondary, 10);
  }

}

@mixin toast-theme($theme) {
  $font-primary: map-get($theme, font-primary);

  $font-weight-normal:  map-get($theme, font-weight-normal);

  $text-alternative: map-get($theme, text-alternative);

  $toast-success: map-get($theme, toast-success);
  $toast-error:   map-get($theme, toast-error);
  $toast-info:    map-get($theme, toast-info);

  .mcrai-toast {
    font-family: $font-primary;
  }

  .mcrai-toast--success {
    background-color: $toast-success;
  }

  .mcrai-toast--error {
    background-color: $toast-error;
  }

  .mcrai-toast--info {
    background-color: $toast-info;
  }

  .mcrai-toast__text {
    color: $text-alternative;
    font-weight: $font-weight-normal;
  }
}

@mixin input-text-theme($theme) {
  $text-primary: map-get($theme, text-primary);
  $text-secondary: map-get($theme, text-secondary);
  $color-primary: map-get($theme, color-primary);
  $toast-error: map-get($theme, toast-error);
  $font-weight-normal: map-get($theme, font-weight-normal);

  .mcrai-input { }

  .mcrai-input__element {
    color: $text-primary;
  }

  .mcrai-input__element[disabled] {
    color: $text-secondary;
  }

  .mcrai-input__underline--wrapper {
    background-color: $text-secondary;
  }

  .mcrai-input__underline--active {
    transform: scaleX(1);
  }

  .mcrai-input__underline--focused {
    background-color: $color-primary;
  }

  .mcrai-input__underline--error {
    background-color: $toast-error;
  }

  .mcrai-input__placeholder {
    color: $text-secondary;
    font-weight: $font-weight-normal;
  }

  .mcrai-input__error {
    color: $toast-error;
  }
}

@mixin input-checkbox-theme($theme) {
  $text-primary: map-get($theme, text-primary);
  $text-secondary: map-get($theme, text-secondary);
  $font-weight-normal: map-get($theme, font-weight-normal);
  $color-primary: map-get($theme, color-primary);
  $panel-primary: map-get($theme, panel-primary);

  $line-primary: map-get($theme, line-primary);
  $line-secondary: map-get($theme, line-secondary);

  .mcrai-input--checkbox { }

  .mcrai-input__label { }

  .mcrai-input__checkbox-element { }

  .mcrai-input__checkmark {
    border-color: $line-secondary;
    background-color: $panel-primary;
  }

  .mcrai-input__checkmark:after {
    border-color: $color-primary;
  }

  .mcrai-input__text {
    color: $text-secondary;
    font-weight: $font-weight-normal;
  }
}

@mixin input-file-theme($theme) {
  $text-secondary: map-get($theme, text-secondary);

  $line-primary: map-get($theme, line-primary);
  $line-secondary: map-get($theme, line-secondary);

  $toast-error: map-get($theme, toast-error);

  .mcrai-input__dropzone {
    cursor: pointer;
    background-image:
      linear-gradient(to right, $line-secondary 50%, transparent 50%),
      linear-gradient(to right, $line-secondary 50%, transparent 50%),
      linear-gradient(to bottom, $line-secondary 50%, transparent 50%),
      linear-gradient(to bottom, $line-secondary 50%, transparent 50%);
  }

  .mcrai-input__dropzone:hover,
  .mcrai-input__dropzone--dragover {
    background-color: $line-primary;
  }

  .mcrai-input__hint {
    color: $text-secondary;
  }

  .mcrai-input__file-name { }

  .mcrai-input__file-size {
    color: $text-secondary;
  }

  .mcrai-input__file-size--error {
    color: $toast-error;
  }

  .mcrai-input__max-file-size {
    color: $text-secondary;
  }
}

@mixin input-radio-theme($theme) {
  $text-secondary: map-get($theme, text-secondary);
  $font-weight-normal: map-get($theme, font-weight-normal);
  $color-primary: map-get($theme, color-primary);
  $line-primary: map-get($theme, line-primary);

  .mcrai-input__circle {
    border-color: $line-primary;
  }

  .mcrai-input__circle:after {
    background-color: $color-primary;
  }

  .mcrai-input__text {
    color: $text-secondary;
    font-weight: $font-weight-normal;
  }
}

@mixin option-theme($theme) {
  $font-primary: map-get($theme, font-primary);
  $text-primary: map-get($theme, text-primary);
  $panel-primary: map-get($theme, panel-primary);
  $panel-secondary: map-get($theme, panel-secondary);
  $line-primary: map-get($theme, line-primary);
  $font-weight-normal: map-get($theme, font-weight-normal);

  .mcrai-option,
  [mcrai-menu-item] {
    background-color: $panel-secondary;
    color: $text-primary;
    font-family: $font-primary;
    font-weight: $font-weight-normal;
  }

  .mcrai-option:hover,
  .mcrai-option--active,
  [mcrai-menu-item]:hover {
    background-color: $panel-primary;
  }
}

@mixin arrow-down ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-top: $side_length solid $color;
}

@mixin arrow-up ($side_length, $color) {
  width: 0;
  height: 0;

  border-left: $side_length solid transparent;
  border-right: $side_length solid transparent;

  border-bottom: $side_length solid $color;
}

@mixin standard-animation-curve() {
  transition-timing-function: cubic-bezier(.25, .8, .25, 1);
}


@mixin select-theme($theme) {
  $text-primary: map-get($theme, text-primary);
  $panel-secondary: map-get($theme, panel-secondary);
  $line-primary: map-get($theme, line-primary);

  .mcrai-select__panel {
    border: 0;
/*    border-color: $line-primary;
    border-top-color: transparent;
    background-color: $panel-secondary;*/
  }

  .mcrai-select__arrow {
    @include arrow-down(6px, $text-primary);
  }
}

@mixin menu-theme($theme) {
  $line-primary: map-get($theme, line-primary);

  .mcrai-menu__panel {
    border-color: $line-primary;
  }
}

@mixin menu-item-theme($theme) {
  $font-primary: map-get($theme, font-primary);
  $text-primary: map-get($theme, text-primary);
  $panel-primary: map-get($theme, panel-primary);
  $panel-secondary: map-get($theme, panel-secondary);
  $line-primary: map-get($theme, line-primary);
  $font-weight-normal: map-get($theme, font-weight-normal);

  [mcrai-menu-item] {
    background-color: $panel-secondary;
    color: $text-primary;
    font-family: $font-primary;
    font-weight: $font-weight-normal;
  }

  [mcrai-menu-item]:hover {
    background-color: $panel-primary;
  }
}
@mixin desc-list-theme($theme) {
  $text-secondary: map-get($theme, text-secondary);
  $text-primary: map-get($theme, text-primary);

  .mcrai-dl { }

  .mcrai-dt {
    color: $text-secondary;
  }

  .mcrai-dd {
    color: $text-primary;
  }
}

@mixin stepper-theme($theme) {
  $line-primary: map-get($theme, line-primary);

  .mcrai-stepper__header-line {
    background-color: $line-primary;
  }
}

@mixin modal-theme($theme) {
  $panel-primary: map-get($theme, panel-primary);
  $panel-secondary: map-get($theme, panel-secondary);

  $line-primary: map-get($theme, line-primary);

  .mcrai-modal {
    background-color: $panel-secondary;
    border: 1px solid $line-primary;
  }

  .mcrai-modal__header {
    border-bottom: 1px solid $line-primary;
  }

  .mcrai-modal__actions {
    border-top: 1px solid $line-primary;
  }
}

@function get-text-color($color, $light_color, $dark_color) {
  $red: red($color);
  $green: green($color);
  $blue: blue($color);

  @return if($red * 0.299 + $green * 0.587 + $blue * 0.114 > 186, $dark_color, $light_color);
}


@mixin progress-theme($theme) {
  $color-primary: map-get($theme, color-primary);
  $color-secondary: map-get($theme, color-secondary);

  $text-primary: map-get($theme, text-primary);
  $text-alternative: map-get($theme, text-alternative);

  .mcrai-progress { }

  .mcrai-progress__bar { }
  .mcrai-progress__value { }

  .mcrai-progress--primary {
    .mcrai-progress__bar {
      background-color: $color-primary;
    }

    .mcrai-progress__value {
      color: get-text-color($color-primary, $text-alternative, $text-primary);
    }
  }

  .mcrai-progress--secondary {
    .mcrai-progress__bar {
      background-color: $color-secondary;
    }

    .mcrai-progress__value {
      color: get-text-color($color-secondary, $text-alternative, $text-primary);
    }
  }

}

@mixin table-theme($theme) {
  $panel-primary: map-get($theme, panel-primary);
  $panel-secondary: map-get($theme, panel-secondary);

  .mcrai-tr--highlight {
    background-color: darken($panel-primary, 10) !important;
  }

  .mcrai-tr:nth-child(odd) {
    background-color: $panel-primary;
  }

  .mcrai-tr:nth-child(even) {
    background-color: $panel-secondary;
  }

}

@mixin unordered-list-theme($theme) {
  $font-weight-bold: map-get($theme, font-weight-bold);

  .mcrai-li--highlight {
    font-weight: $font-weight-bold;
  }
}

@mixin tabs-theme($theme) {
  $color-primary: map-get($theme, color-primary);
  $panel-primary: map-get($theme, panel-primary);

  .mcrai-tabs {
    background-color: $panel-primary;
  }

  .mcrai-ink-bar {
    background-color: $color-primary;
  }
}

@mixin spacer-theme($theme) {
  $line-primary:     map-get($theme, line-primary);
  $line-secondary:   map-get($theme, line-secondary);
  $line-alternative: map-get($theme, line-alternative);

  .mcrai-spacer,
  .mcrai-spacer--primary {
    background-color: $line-primary;
  }

  .mcrai-spacer--secondary {
    background-color: $line-secondary;
  }

  .mcrai-spacer--alternative {
    background-color: $line-alternative;
  }
}

@mixin tooltip-theme($theme) {
  $panel-primary: map-get($theme, panel-primary);
  $panel-secondary: map-get($theme, panel-secondary);
  $line-primary: map-get($theme, line-primary);

  .mcrai-tooltip {
    background-color: $panel-primary;
    border: 1px solid $line-primary;
  }
}

@mixin slider-theme($theme) {
  $color-primary: map-get($theme, color-primary);
  $text-alternative: map-get($theme, text-alternative);
  $line-primary: map-get($theme, line-primary);

  .mcrai-slider__track--background {
    background-color: $line-primary;
  }

  .mcrai-slider__track--fill {
    background-color: $color-primary;
  }

  .mcrai-slider__thumb {
    background-color: $color-primary;
  }

  .mcrai-slider__thumb-value {
    background-color: $color-primary;
    color: $text-alternative;
  }
}

@mixin swiper-theme($theme) {
  $text-primary: map-get($theme, text-primary);

  .mcrai-swiper__bullet {
    background-color: $text-primary;
  }

}

.cdk-global-overlay-wrapper, .cdk-overlay-container {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}

.cdk-overlay-connected-position-bounding-box,
.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-connected-position-bounding-box {
  flex-direction: column;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  z-index: 1000;
  max-width: 100%;
  max-height: 100%;
}

.cdk-overlay-pane--fullscreen {
  width: 100%;
  height: 100%;
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  transition: opacity .4s cubic-bezier(.25,.8,.25,1);
  opacity: 0;

  &.cdk-overlay-backdrop-showing {
    opacity: 1;
  }
}

.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.cdk-overlay-transparent-backdrop {
  background: none;
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

@mixin create-theme2($theme) {
  @include button-theme($theme);
  @include icon-button-theme($theme);
  @include icon-theme2($theme);
  @include panel-theme($theme);
  @include toast-theme($theme);
  @include input-text-theme($theme);
  @include select-theme($theme);
  @include menu-theme($theme);
  @include menu-item-theme($theme);
  @include desc-list-theme($theme);
  @include stepper-theme($theme);
  @include input-file-theme($theme);
  @include modal-theme($theme);
  @include progress-theme($theme);
  @include input-checkbox-theme($theme);
  @include table-theme($theme);
  @include unordered-list-theme($theme);
  @include tabs-theme($theme);
  @include input-radio-theme($theme);
  @include spacer-theme($theme);
  @include tooltip-theme($theme);
  @include slider-theme($theme);
  @include swiper-theme($theme);
  @include option-theme($theme);
}