@import "./picker.vars";

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

ion-picker {
  @include font-smoothing();
  @include position(0, null, null, 0);

  display: block;
  position: absolute;

  width: $picker-width;
  height: $picker-width;

  contain: strict;
  z-index: $z-index-overlay;
}

.picker-toolbar {
  width: 100%;

  contain: strict;
  z-index: 1;
}

.picker-wrapper {
  @include position(null, 0, 0, 0);
  @include margin(auto);
  @include transform(translate3d(0, 100%, 0));

  display: flex;
  position: absolute;

  flex-direction: column;

  width: $picker-width;
  max-width: $picker-max-width;

  contain: strict;
  overflow: hidden;
  z-index: $z-index-overlay-wrapper;
}

.picker-columns {
  @include margin(null, null, constant(safe-area-inset-bottom), null);
  @include margin(null, null, env(safe-area-inset-bottom), null);

  @include rtl() {
    // Date is the same format in both directions
    flex-direction: row-reverse;
  }

  display: flex;
  position: relative;

  justify-content: center;

  contain: strict;
  overflow: hidden;
}

.picker-col {
  display: flex;
  position: relative;

  flex: 1;
  justify-content: center;

  height: 100%;
  box-sizing: content-box;

  contain: content;
}

.picker-opts {
  position: relative;

  flex: 1;

  max-width: 100%;
}

.picker-prefix {
  position: relative;

  flex: 2;

  min-width: 45%;
  max-width: 50%;

  text-align: end;

  white-space: nowrap;
}

.picker-suffix {
  position: relative;

  flex: 2;

  min-width: 45%;
  max-width: 50%;

  text-align: start;

  white-space: nowrap;
}

// contain property is supported by Chrome
.picker-opt {
  @include position(0, null, null, 0);

  display: block;
  position: absolute;

  width: 100%;

  border: 0;

  text-align: center;
  text-overflow: ellipsis;

  white-space: nowrap;

  contain: strict;
  overflow: hidden;
  will-change: transform;
}

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

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

.picker-opts-left {
  @include ltr() {
    justify-content: flex-start;
  }

  @include rtl() {
    justify-content: flex-end;
  }
}

.picker-opts-right {
  @include ltr() {
    justify-content: flex-end;
  }

  @include rtl() {
    justify-content: flex-start;
  }
}

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

.picker-button {
  border: 0;

  font-family: inherit;
}

.picker-opt,
.picker-button {
  &:active,
  &:focus {
    outline: none;
  }
}