//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

// Contextual Colors
@mixin color-property($class, $colorName, $property, $color) {
  .ui-#{$class}-#{$colorName} {
    #{$property}: $color;
  }
}

// Switch
@mixin switch-theme($theme, $offBg: $light, $offText: $muted, $onBg: $dark, $onText: $white) {
  .ui-switch-control.#{$theme} .ui-switch {
    > .ui-switch-input ~ .ui-switch-inner {
      background-color: $offBg;

      &:before {
        color: $offText;
      }
    }

    > .ui-switch-input:checked ~ .ui-switch-inner {
      background-color: $onBg;

      &:after {
        color: $onText;
      }
    }
  }
}
//

// Toolbars
@mixin toolbar-theme($theme, $bg, $color: $white) {
  .ui-toolbar.#{$theme} {
    background: $bg;

    .ui-dropdown {
      .ui-caret,
      .ui-label {
        color: $color;
      }
      background: rgba($white, .1);

      .ui-list-item {
        &.ui-hilight {
          color     : $color;
          background: rgba($bg, .5);
        }

        &.ui-selected,
        &:active {
          color     : $color;
          background: $bg;
        }
      }
    }

     > .ui-input-group .ui-group-wrapper,
    > .ui-input-wrapper .ui-input-control {
      background: rgba($white, .1);
      color     : $color;
    }

    > .ui-input-group .ui-group-wrapper .ui-input-control {
      background: none;
      color     : $color;
    }

     > .ui-input-group .ui-input-wrapper:not(.ui-focus) .ui-input-control,
    > .ui-input-wrapper:not(.ui-focus) .ui-input-control {
      box-shadow: 0 -1px 0 0 rgba($color, .5) inset;
    }

     > .ui-input-group .ui-input-wrapper.ui-focus .ui-input-control,
    > .ui-input-wrapper.ui-focus .ui-input-control {
      box-shadow: 0 -2px 0 0 $color inset;
    }
  }
}

// Statsbar
@mixin statsbar-theme($theme, $color, $bg: auto) {
  .ui-statsbar.#{$theme} {
    background: $bg;

    .ui-stat {
      color: $color;
    }

    .ui-stat-label {
      color: rgba($color, .75);
    }
  }

  .ui-statsbar .ui-stat.#{$theme} {
    color     : $color;
    background: $bg;

    .ui-stat-label {
      color: rgba($color, .75);
    }
  }
}

// Alerts/Toasts
@mixin toast-theme($theme, $bg, $color: $white) {
  .ui-toast.#{$theme} {
    background  : $bg;
    color       : $color;
    border-color: shade($bg, 10%);
  }
}

// Headers
@mixin header-theme($theme, $bg, $color: $white) {
  .ui-header.#{$theme} {
    background: tint($bg, 10%);
    color     : $color;

    .ui-drawer-toggle {
      color: $color !important;
    }

    .ui-dropdown {
      .ui-caret,
      .ui-label {
        color: $color;
      }
      background: rgba($white, .1);

      .ui-list-item {
        &.ui-hilight {
          color     : $color;
          background: rgba($bg, .5);
        }

        &.ui-selected,
        &:active {
          color     : $color;
          background: $bg;
        }
      }
    }

    .ui-header-button {
      color     : rgba($color, .7);
      background: tint($bg, 20%);
      border    : 1px solid rgba(shade($bg, 20%), .5);

      &:hover {
        color       : rgba($color, .9);
        border-color: rgba(shade($bg, 40%), .5);
      }

      &:active {
        background: shade($bg, 10%);
      }
    }
  }
}
//

// Breadcrumbs
@mixin breadcrumb-theme($theme, $themecolor) {
  .ui-breadcrumb.#{$theme} .ui-crumb {
    @for $i from 0 through 12 {
      $color: lighten($themecolor, $i * 3%);
      $hover: darken($color, 5%);

      &:nth-child(#{$i + 1}) a {
        background: $color;

        &:after {
          border-left-color: $color;
        }

        &:hover {
          background: $hover;

          &:after {
            border-left-color: $hover;
          }
        }
      }
    }
  }

  .rtl,
  [dir="rtl"] {
    .ui-breadcrumb.#{$theme} .ui-crumb {
      @for $i from 0 through 12 {
        $color: lighten($themecolor, $i * 3%);
        $hover: darken($color, 5%);

        &:nth-child(#{$i + 1}) a {
          &:after {
            border-right-color: $color;
          }

          &:hover:after {
            border-right-color: $hover;
          }
        }
      }
    }
  }
}
//

// Chips
@mixin chip-theme($style, $bg, $text) {
  .ui-chip.#{$style} {
    .ui-chip-label {
      color     : $text;
      background: $bg;
    }
  }
}
//

// Tooltip
@mixin tooltip-theme($style, $bg, $text) {
  .ui-tooltip.#{$style} {
    color     : $text;
    background: $bg;

    &:after {
      border-color: $bg transparent;
    }
  }
}
//

// Ribbon
@mixin ribbon-theme($style, $bg, $text) {
  .ui-ribbon.#{$style} {
    color     : $text;
    background: $bg;
  }
}
//

// Buttons
@mixin button-theme($style, $bg, $text, $hoverBg, $hoverText, $activeBg, $activeText) {
  .ui-button-group.ui-toggle .ui-button.#{$style}.ui-active {
    color         : $text;
    background    : $bg;
    border-color  : rgba(shade($bg, 15%),.5);
    cursor        : default;
    pointer-events: none;
  }

  .ui-button.#{$style} {
    color       : $text;
    background  : $bg;
    border-color: shade($bg, 15%);
    @include box-shadow(1px 1px 1px 0 rgba(shade($bg, 20%),.5));

    &.ui-btn-dropdown:after {
      color: rgba($text, .8);
    }

    &:hover {
      color       : $hoverText;
      background  : $hoverBg;
      border-color: shade($bg, 20%);
    }

    &:active {
      color       : $activeText;
      background  : $activeBg;
      border-color: shade($bg, 20%);
    }

    &.ui-open,
    &:active {
      @include box-shadow(-1px -1px 0 0 tint($activeBg, 25%) inset, 1px 1px 0 0 shade($activeBg, 25%) inset);
    }
  }
}