@import "../../globals.md";
@import "./picker";

// Material Design Picker
// --------------------------------------------------

$picker-md-height:                            260px !default;
$picker-md-border-color:                      $list-md-border-color !default;
$picker-md-background-color:                  $list-md-background-color !default;

$picker-md-toolbar-height:                    44px !default;
$picker-md-toolbar-background-color:          $picker-md-background-color !default;

$picker-md-button-height:                     $picker-md-toolbar-height !default;
$picker-md-button-text-color:                 $link-md-color !default;
$picker-md-button-background-color:           transparent !default;

$picker-md-column-padding:                    0 8px !default;

$picker-md-option-padding:                    0 !default;
$picker-md-option-text-color:                 $list-md-text-color !default;
$picker-md-option-font-size:                  18px !default;
$picker-md-option-height:                     42px !default;
$picker-md-option-offset-y:                   (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;

$picker-md-option-selected-font-size:         22px !default;
$picker-md-option-selected-color:             $link-md-color !default;

$picker-highlight-opacity:                     .8 !default;


.picker-wrapper {
  height: $picker-md-height;

  border-top: 1px solid $picker-md-border-color;

  background: $picker-md-background-color;
}

.picker-toolbar {
  display: flex;

  justify-content: flex-end;

  height: $picker-md-toolbar-height;

  background: $picker-md-toolbar-background-color;
}

.hairlines .picker-wrapper,
.hairlines .picker-toolbar {
  border-width: $hairlines-width;
}

.picker-button,
.picker-button.activated {
  margin: 0;

  height: $picker-md-button-height;

  color: $picker-md-button-text-color;
  background: $picker-md-button-background-color;

  box-shadow: none;
}

.picker-columns {
  height: $picker-md-height - $picker-md-toolbar-height;

  perspective: 1800px;
}

.picker-col {
  padding: $picker-md-column-padding;

  transform-style: preserve-3d;
}

.picker-prefix,
.picker-suffix,
.picker-opts {
  top: $picker-md-option-offset-y;

  font-size: $picker-md-option-font-size;
  line-height: $picker-md-option-height;
  color: $picker-md-option-text-color;

  transform-style: preserve-3d;

  pointer-events: none;
}

.picker-opts ion-button-effect {
  display: none;
}

.picker-opt {
  margin: 0;
  padding: $picker-md-option-padding;

  font-size: $picker-md-option-font-size;
  line-height: $picker-md-option-height;

  background: transparent;

  transition-timing-function: ease-out;

  backface-visibility: hidden;

  pointer-events: auto;
}

.picker-opt .button-inner {
  transition: 200ms;
}

.picker-prefix,
.picker-suffix,
.picker-opt-selected {
  font-size: $picker-md-option-selected-font-size;

  color: $picker-md-option-selected-color;
}

.picker-above-highlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

  width: 100%;
  height: $picker-md-option-offset-y + 4px;

  border-bottom: 1px solid $picker-md-border-color;

  background: linear-gradient(to bottom,
                            rgba($picker-md-background-color, 1) 20%,
                            rgba($picker-md-background-color, .7) 100%);

  transform: translate3d(0, 0, 90px);
}

.picker-below-highlight {
  position: absolute;
  top: $picker-md-option-offset-y + $picker-md-option-height - 4;
  left: 0;
  z-index: 11;

  width: 100%;
  height: $picker-md-option-offset-y + $picker-md-option-height;

  border-top: 1px solid $picker-md-border-color;

  background: linear-gradient(to top,
                           rgba($picker-md-background-color, 1) 30%,
                           rgba($picker-md-background-color, .7) 100%);

  transform: translate3d(0, 0, 90px);
}