@import "../core/exports";
@import "../core/ios";
@import "../frame/frame.ios.colors";

@mixin mbsc-ios-scroller($theme, $params) {
  @include exports("scroller.#{$theme}.colors") {

    @include mbsc-ios-frame($theme, $params);

    $text: map-get($params, 'text');
    $accent: map-get($params, 'accent');
    $background: map-get($params, 'background');

    $button: '';
    @if (map-get($params, 'button')) {
      $button: map-get($params, 'button');
    }
    @else {
      $button: $accent;
    }

    $background-param: map-get($params, 'frame-background');
    $text-param: map-get($params, 'frame-text');
    $accent-param: map-get($params, 'frame-accent');

    $background: if($background-param, $background-param, $background);
    $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text));
    $accent: if($accent-param, $accent-param, $accent);

    // calculated colors
    $background-limited: hsl(hue($background), saturation($background), max(lightness($background), 3%));
    $background-alt: lighten($background-limited, 3%);
    $cont-background: lighten($background, 6%);
    $item-color: hsl(hue($text), saturation($text), 62%);

    $top-bottom-frame: '';
    $border-color: '';
    $item-3d: '';
    $popup-border: '';
    $label-text: '';
    $button-active: '';
    $top-bottom-wheel-border: '';
    @if (lightness($background) > 50%) {
      $top-bottom-frame: adjust-hue(darken(saturate($background, 12%), 13%), 216deg);
      $border-color: darken($background-limited, 17%);
      $item-3d: darken($background-limited, 33%);
      $popup-border: $border-color;
      $label-text: lighten($text, 67%);
      $button-active: darken($background, 5%);
      $top-bottom-wheel-border: darken($background-limited, 30%);
    }
    @else {
      $top-bottom-frame: $background-limited;
      $border-color: lighten($background, 20%);
      $item-3d: lighten($background-limited, 40%);
      $popup-border: lighten($border-color, 13%);
      $label-text: $text;
      $button-active: lighten($background, 12%);
      $top-bottom-wheel-border: $border-color;
    }

    .mbsc-#{$theme} {
      /* Scroller */

      &.mbsc-sc.mbsc-fr-top .mbsc-fr-w,
      &.mbsc-sc.mbsc-fr-bottom .mbsc-fr-w {
        background: $top-bottom-frame;
      }

      &.mbsc-calendar .mbsc-fr-persp .mbsc-fr-w {
        background: $background-limited;
      }

      &.mbsc-calendar.mbsc-fr-top .mbsc-fr-btn-cont,
      &.mbsc-calendar.mbsc-fr-bottom .mbsc-fr-btn-cont {
        border-bottom: 1px solid $border-color;
      }

      /* Top / bottom color theme */

      &.mbsc-fr-top .mbsc-sc-whl-l,
      &.mbsc-fr-bottom .mbsc-sc-whl-l {
        border-top: 1px solid $top-bottom-wheel-border;
        border-bottom: 1px solid $top-bottom-wheel-border;
      }

      .mbsc-sc-whl-l,
      &.mbsc-calendar .mbsc-sc-whl-l {
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
      }

      &.mbsc-fr-top .mbsc-sc-whl-o,
      &.mbsc-fr-bottom .mbsc-sc-whl-o {
        background: -webkit-linear-gradient($top-bottom-frame, rgba($top-bottom-frame, 0) 52%, rgba($top-bottom-frame, 0) 48%, $top-bottom-frame);
        background: linear-gradient($top-bottom-frame, rgba($top-bottom-frame, 0) 52%, rgba($top-bottom-frame, 0) 48%, $top-bottom-frame);
      }

      .mbsc-sc-whl-o,
      &.mbsc-calendar .mbsc-sc-whl-o {
        background: -webkit-linear-gradient($background-limited, rgba($background-limited, 0) 52%, rgba($background-limited, 0) 48%, $background-limited);
        background: linear-gradient($background-limited, rgba($background-limited, 0) 52%, rgba($background-limited, 0) 48%, $background-limited);
      }

      &.mbsc-fr-top .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c,
      &.mbsc-fr-bottom .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c {
        background: $top-bottom-frame;
      }

      /* Inline color theme */

      &.mbsc-fr.mbsc-fr-inline .mbsc-sc-whl-o {
        background: -webkit-linear-gradient($background-alt, rgba($background-alt, 0) 52%, rgba($background-alt, 0) 48%, $background-alt);
        background: linear-gradient($background-alt, rgba($background-alt, 0) 52%, rgba($background-alt, 0) 48%, $background-alt);
      }

      &.mbsc-fr.mbsc-fr-inline .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c {
        background: $background-alt;
      }

      /* Wheel label */

      .mbsc-sc-lbl {
        color: $label-text;
      }

      .mbsc-sc-itm {
        color: $item-color;
      }

      &.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover,
      .mbsc-sc-itm:focus {
        background: rgba($button, .15);
      }

      &.mbsc-sc .mbsc-sc-whl .mbsc-sc-itm.mbsc-active {
        background: rgba($button, .2);
      }

      .mbsc-sc-itm-sel,
      .mbsc-sc-whl-gr-3d .mbsc-sc-itm {
        color: $text;
      }


      /* 3D */

      .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c,
      &.mbsc-calendar .mbsc-sc-whl-gr-3d .mbsc-sc-whl-c {
        background: $background-limited;
      }

      .mbsc-sc-whl-gr-3d .mbsc-sc-itm-3d {
        color: $item-3d;
      }

      /* Clickpick mode */

      .mbsc-sc-btn {
        color: $button;
      }

      /* Multiple select */

      &.mbsc-sel-multi .mbsc-sc-itm {
        color: $text;
      }

      .mbsc-sc-whl-multi .mbsc-sc-itm-sel {
        color: $accent;
      }

      /* Desktop view */

      &.mbsc-fr-pointer {
        .mbsc-sc-whl-l {
          border-color: $popup-border;
        }

        .mbsc-sc-itm {
          color: $text;
        }

        .mbsc-sc-itm-sel {
          color: $accent;
        }
      }
    }
  }
}
