@import "./select.vars";

// Select
// --------------------------------------------------

:host {
  /**
   * @prop --padding-top: Top padding of the select
   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select
   * @prop --padding-bottom: Bottom padding of the select
   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select
   *
   * @prop --placeholder-color: Color of the select placeholder text
   * @prop --placeholder-opacity: Opacity of the select placeholder text
   */
  --placeholder-color: currentColor;
  --placeholder-opacity: 0.33;

  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));

  display: flex;
  position: relative;

  align-items: center;

  font-family: $font-family-base;

  overflow: hidden;
  z-index: $z-index-item-input;
}

:host(.in-item) {
  position: static;

  max-width: 45%;
}

:host(.select-disabled) {
  opacity: .4;
  pointer-events: none;
}

:host(.ion-focused) button {
  border: 2px solid #5e9ed6;
}

.select-placeholder {
  color: var(--placeholder-color);

  opacity: var(--placeholder-opacity);
}

label {
  @include input-cover();

  display: flex;

  align-items: center;

  opacity: 0;
}

button {
  @include visually-hidden();
}

.select-icon {
  position: relative;
}

.select-text {
  flex: 1;

  min-width: 16px;

  font-size: inherit;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;
}

.select-icon-inner {
  @include position(50%, null, null, 5px);
  @include margin(-2px, null, null, null);

  position: absolute;

  width: 0;
  height: 0;

  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;

  color: currentColor;

  pointer-events: none;
}