@import "./select.vars";

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

:host {
  /**
   * @prop --color: Color of the select text
   * @prop --icon-color: Color of the select icon
   * @prop --padding-top: Top padding of the select
   * @prop --padding-end: End padding of the select
   * @prop --padding-bottom: Bottom padding of the select
   * @prop --padding-start: Start padding of the select
   * @prop --placeholder-color: Color of the select placeholder text
   */

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

  display: flex;

  position: relative;

  color: var(--color);

  font-family: $font-family-base;

  overflow: hidden;
}

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

  max-width: 45%;
}

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

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

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

.select-cover {
  @include input-cover();
}

.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(-3px, null, null, null);

  position: absolute;

  width: 0;
  height: 0;

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

  color: var(--icon-color);
  pointer-events: none;
}

::slotted(ion-select-option) {
  display: none;
}

button:focus {
  outline: none;
}