@import "../sass/abstracts/variables";
@import "../sass/abstracts/mixins";

$height-overlay: 256px;
$height-input: 30px;
$width-overlay: 408px;
$min-height-result: $height-overlay/2 + $height-input;

:host {
  display: flex;
  flex-direction: column;
  background-color: $white;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);

  transform-origin: 50% 20.5px 0px;
  font-size: 14px;
  opacity: 1;
  //min-width: calc(100% + 32px);
  min-width: 266px;
  transform: scaleY(1);
  width: 100%;

  height: $height-overlay;
  //width: $width-overlay;
  overflow: auto;
  border-radius: 4px;

  @include respond-to-breakpoint('xs') {
    min-width: 100%;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
  }

  .close {
    display: none;
    padding-left: 10px;
    padding-right: 5px;
    font-size: 25px;
    cursor: pointer;

    @include respond-to-breakpoint('xs') {
      display: inline-block;
    }
  }

  .input {
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    .form-field {
      width: 100%;
    }

    .numbers {
      padding-left: 5px;
    }
  }

  .result {
    min-height: $min-height-result;

    @include respond-to-breakpoint('xs') {
      min-height: unset;
      height: 100vh;
    }

    ul {
      li {
        padding: 0 16px;
        height: 3em;
        cursor: pointer;

        @include truncate-with-ellipsis;

        &:hover {
          background-color: rgba(0, 0, 0, 0.04);
        }

        &.is-active {
          background-color: rgba(0, 0, 0, 0.12);
          color: $primary-color;
        }
      }
    }
  }
}


:host(.is-loading) {
  overflow: hidden;
}