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

// Picker
// --------------------------------------------------

/// @prop - Width of the picker
$picker-width: 100% !default;

/// @prop - Max width of the picker
$picker-max-width: 500px !default;

.ion-picker-cmp {
  position: fixed;
  z-index: $z-index-overlay + $z-index-overlay-sheet;
  display: block;
  width: $picker-width;
  height: $picker-width;
  contain: strict;

  @include position(0, null, null, 0);
}

.picker-toolbar {
  z-index: 1;
  width: 100%;
  contain: strict;
}

.picker-wrapper {
  position: absolute;
  z-index: $z-index-overlay-wrapper;
  display: flex;
  width: $picker-width;
  max-width: $picker-max-width;
  overflow: hidden;
  flex-direction: column;
  transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 400ms;
  contain: strict;

  @include position(null, 0, 0, 0);
  @include margin(auto);
}

.picker-columns {
  position: relative;
  display: flex;
  overflow: hidden;
  justify-content: center;
  contain: strict;

  @include margin(null, null, constant(safe-area-inset-bottom), null);
  @include margin(null, null, env(safe-area-inset-bottom), null);
}

.picker-col {
  position: relative;
  display: flex;
  height: 100%;
  box-sizing: content-box;
  flex: 1;
  justify-content: center;
  contain: content;
}

.picker-opts {
  position: relative;
  max-width: 100%;
  transform: rotateX(0deg) translate3d(0, 0, -90px);
  flex: 1;
}

.picker-prefix {
  position: relative;
  min-width: 45%;
  max-width: 50%;
  white-space: nowrap;
  flex: 2;

  @include text-align(end);
}

.picker-suffix {
  position: relative;
  min-width: 45%;
  max-width: 50%;
  white-space: nowrap;
  flex: 2;

  @include text-align(start);
}

// contain property is supported by Chrome
.picker-opt {
  position: absolute;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate3d(-9999px, 0, 0);
  will-change: transform;
  contain: strict;

  @include position(0, null, null, 0);
  @include text-align(center);
}

.picker-opt.picker-opt-disabled {
  pointer-events: none;
}

.picker-opt-disabled {
  opacity: 0;
}

.picker-opts-left {
  justify-content: flex-start;
}

.picker-opts-right {
  justify-content: flex-end;
}

.picker-above-highlight,
.picker-below-highlight {
  display: none;
  pointer-events: none;
}