@import "../../../themes/ionic.globals.wp";

// Windows Picker
// --------------------------------------------------

/// @prop - Height of the picker wrapper
$picker-wp-height: 260px !default;

/// @prop - Border color of the picker wrapper
$picker-wp-border-color: $list-wp-border-color !default;

/// @prop - Background of the picker wrapper
$picker-wp-background-color: $list-wp-background-color !default;

/// @prop - Height of the picker toolbar
$picker-wp-toolbar-height: 44px !default;

/// @prop - Background of the picker toolbar
$picker-wp-toolbar-background-color: $picker-wp-background-color !default;

/// @prop - Height of the picker button
$picker-wp-button-height: $picker-wp-toolbar-height !default;

/// @prop - Text color of the picker button
$picker-wp-button-text-color: color($colors-wp, primary) !default;

/// @prop - Background of the picker button
$picker-wp-button-background-color: transparent !default;

/// @prop - Padding top of the picker column
$picker-wp-column-padding-top: 0 !default;

/// @prop - Padding end of the picker column
$picker-wp-column-padding-end: 4px !default;

/// @prop - Padding bottom of the picker column
$picker-wp-column-padding-bottom: $picker-wp-column-padding-top !default;

/// @prop - Padding start of the picker column
$picker-wp-column-padding-start: $picker-wp-column-padding-end !default;

/// @prop - Padding top of the picker option
$picker-wp-option-padding-top: 0 !default;

/// @prop - Padding end of the picker option
$picker-wp-option-padding-end: $picker-wp-option-padding-top !default;

/// @prop - Padding bottom of the picker option
$picker-wp-option-padding-bottom: $picker-wp-option-padding-top !default;

/// @prop - Padding start of the picker option
$picker-wp-option-padding-start: $picker-wp-option-padding-end !default;

/// @prop - Text color of the picker option
$picker-wp-option-text-color: $list-wp-text-color !default;

/// @prop - Font size of the picker option
$picker-wp-option-font-size: 22px !default;

/// @prop - Height of the picker option
$picker-wp-option-height: 42px !default;

/// @prop - Offset y of the picker option
$picker-wp-option-offset-y: (($picker-wp-height - $picker-wp-toolbar-height) / 2) - ($picker-wp-option-height / 2) - 10 !default;

/// @prop - Text color of the selected picker option
$picker-wp-option-selected-color: color($colors-wp, primary) !default;

.picker-wp .picker-wrapper {
  height: $picker-wp-height;
  background: $picker-wp-background-color;
  border-top: $hairlines-width solid $picker-wp-border-color;
}

.picker-wp .picker-toolbar {
  display: flex;
  height: $picker-wp-toolbar-height;
  background: $picker-wp-toolbar-background-color;
  border-width: $hairlines-width;
  justify-content: flex-end;
}

.picker-wp .picker-toolbar-button {
  flex: 1;

  @include text-align(end);
}

.picker-wp .picker-toolbar-cancel {
  font-weight: normal;

  @include text-align(start);
}

.picker-wp .picker-button,
.picker-wp .picker-button:active {
  height: $picker-wp-button-height;
  color: $picker-wp-button-text-color;
  background: $picker-wp-button-background-color;
  box-shadow: none;

  @include margin(0);
}

.picker-wp .picker-columns {
  height: $picker-wp-height - $picker-wp-toolbar-height;
  perspective: 1800px;
}

.picker-wp .picker-col {
  transform-style: preserve-3d;

  @include padding($picker-wp-column-padding-top, $picker-wp-column-padding-end, $picker-wp-column-padding-bottom, $picker-wp-column-padding-start);
}

.picker-wp .picker-prefix,
.picker-wp .picker-suffix,
.picker-wp .picker-opts {
  top: $picker-wp-option-offset-y;
  font-size: $picker-wp-option-font-size;
  line-height: $picker-wp-option-height;
  color: $picker-wp-option-text-color;
  pointer-events: none;
  transform-style: preserve-3d;
}

.picker-wp .picker-opt {
  height: 42px;
  font-size: $picker-wp-option-font-size;
  line-height: $picker-wp-option-height;
  color: $picker-wp-option-text-color;
  pointer-events: auto;
  background: transparent;
  transition-timing-function: ease-out;
  backface-visibility: hidden;

  @include margin(0);
  @include padding($picker-wp-option-padding-top, $picker-wp-option-padding-end, $picker-wp-option-padding-bottom, $picker-wp-option-padding-start);
}

.picker-wp .picker-prefix,
.picker-wp .picker-suffix,
.picker-wp .picker-opt-selected {
  color: $picker-wp-option-selected-color;
}

.picker-wp .picker-above-highlight {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: $picker-wp-option-offset-y + 4px;
  background:
    linear-gradient(
      to bottom,
      rgba($picker-wp-background-color, 1) 20%,
      rgba($picker-wp-background-color, 0.7) 100%
    );
  border-bottom: 1px solid $picker-wp-border-color;

  @include position(0, null, null, 0);
  @include transform(translate3d(0, 0, 90px));
}

.picker-wp .picker-below-highlight {
  position: absolute;
  z-index: 11;
  width: 100%;
  height: $picker-wp-option-offset-y + $picker-wp-option-height;
  background:
    linear-gradient(
      to top,
      rgba($picker-wp-background-color, 1) 30%,
      rgba($picker-wp-background-color, 0.7) 100%
    );
  border-top: 1px solid $picker-wp-border-color;

  @include position($picker-wp-option-offset-y + $picker-wp-option-height - 4, null, null, 0);
  @include transform(translate3d(0, 0, 90px));
}