@import "./picker";
@import "./picker.ios.vars";

// iOS Picker
// --------------------------------------------------

.picker-ios {
  font-family: $picker-ios-font-family;
}

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

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

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

.picker-ios .picker-toolbar {
  display: flex;

  height: $picker-ios-toolbar-height;

  border-bottom: $hairlines-width solid $picker-ios-border-color;

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

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

  text-align: end;
}

.picker-ios .picker-toolbar-button:last-child .picker-button {
  font-weight: $picker-ios-button-strong-font-weight;
}

.picker-ios .picker-toolbar-button:first-child {
  font-weight: normal;

  text-align: start;
}

.picker-ios .picker-button,
.picker-ios .picker-button.activated {
  @include margin(0);
  @include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start);

  height: $picker-ios-button-height;

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

  font-size: $picker-ios-button-font-size;
}

.picker-columns {
  height: $picker-ios-height - $picker-ios-toolbar-height - 1;
  perspective: $picker-ios-column-perspective;
}

.picker-ios .picker-col {
  @include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);

  transform-style: preserve-3d;
}

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

  transform-style: preserve-3d;

  color: $picker-ios-option-text-color;

  font-size: $picker-ios-option-font-size;

  line-height: $picker-ios-option-height;
  pointer-events: none;
}

.picker-ios .picker-opt {
  @include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start);
  @include margin(0);
  @include transform-origin(center, center);

  height: 46px;

  transform-style: preserve-3d;

  transition-timing-function: ease-out;

  background: transparent;
  color: $picker-ios-option-text-color;

  font-size: $picker-ios-option-font-size;

  line-height: $picker-ios-option-height;
  backface-visibility: hidden;
  pointer-events: auto;
}

.picker-ios .picker-above-highlight {
  @include position(0, null, null, 0);
  @include transform(translate3d(0, 0, 90px));

  display: block;
  position: absolute;

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

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

  background: linear-gradient(to bottom,
                            $picker-ios-top-background-color 20%,
                            $picker-ios-bottom-background-color 100%);

  z-index: 10;
}

.picker-ios .picker-below-highlight {
  @include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0);
  @include transform(translate3d(0, 0, 90px));

  display: block;
  position: absolute;

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

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

  background: linear-gradient(to top,
                           $picker-ios-top-background-color 30%,
                           $picker-ios-bottom-background-color 100%);

  z-index: 11;
}