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

:host {
  --lu-combo-box-border-color: #686a6f;
  position: relative;

  .input-area {
    display: inline-flex;

    flex-wrap: wrap;

    width: 100%;

    padding: 9px 0 1px 4px;

    border: 1px solid
      var(--lu-global-form-input-outline, var(--lu-combo-box-border-color));

    outline: none;

    background-color: #ffffff;

    font-size: var(--lu-global-form-input-font-size, 14px);

    line-height: 26px;
    box-sizing: border-box;
  }

  lu-input {
    flex-grow: 1;

    width: 15px;
    min-width: 15px;

    margin-top: -8px;
  }

  .selections {
    display: flex;
    position: absolute;
    right: 0;
    left: 0;

    flex-flow: column;

    border: 1px solid
      var(--lu-global-form-input-outline, var(--lu-combo-box-border-color));
    border-top: none;

    background: #ffffff;

    z-index: 5;
  }

  .selection {
    padding: 10px 17px 8px 17px;

    border: 0;

    color: #222222;

    font: inherit;
    font-size: 14px;

    line-height: 16px;

    text-align: left;

    cursor: pointer;
  }

  .selection .selection-no-value {
    margin-bottom: 16px;
  }

  button.selection {
    background: none;

    overflow: visible;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
    -moz-user-select: none;
    -ms-user-select: none;

    &.active,
    &:hover {
      background-color: #eef3f9;
    }
  }

  .selection-value {
    color: rgba(34, 34, 34, 0.5);
  }

  button.selection::-moz-focus-inner {
    padding: 0;

    border: 0;
  }
}

:host([is-valid]) {
  .input-area {
    border: 2px solid #00854e;
  }
}

:host([is-invalid]) {
  .input-area {
    border: 2px solid #e4002b;
  }
}

:host(.has-focus) {
  .input-area {
    border: 2px solid $primary;
  }
  lu-input {
    min-width: 250px;
  }
}