@import "../../../../sass/variables/colors";
@import "../../../../sass/mixins/elevation";

$animation-time: 150ms;

.vitamui-autocomplete {
  position: relative;
  font-family: "Mulish", sans-serif;

  > input {
    background: $white;
    box-sizing: border-box;
    border-radius: 87px;
    background-color: $white;
    border: solid 1px var(--vitamui-grey-400);
    height: 50px;
    width: 100%;
    padding: 10px 40px 10px 29px;
    transition: padding $animation-time ease-out;

    &:focus {
      outline: none;
      border: solid 1px var(--vitamui-primary);
    }

    &:hover {
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    }
  }

  &.disabled {
    > input {
      background: var(--vitamui-grey-300);

      &:hover {
        box-shadow: none !important;
      }
    }

    > i {
      color: var(--vitamui-grey-700)
    }
  }

  > i {
    font-size: 24px;
    position: absolute;
    right: 16px;
    top: 14px;
    pointer-events: none;
    color: var(--vitamui-primary);
  }

  .input-label {
    font-family: "Mulish", sans-serif;
    font-size: 14px;
    align-items: center;
    letter-spacing: 0.1px;
    line-height: 22px;
    position: absolute;
    left: 30px;
    top: 16px;
    pointer-events: none;
    transform-origin: left;
    color: var(--vitamui-grey-600);
    transition: transform $animation-time ease-out, top $animation-time ease-out;
  }

  &.label-up {
    .input-label {
      transform: scale(0.7) translateY(-15px);
    }

    > input {
      padding-top: 30px;
      font-family: "Mulish", sans-serif;
      font-size: 14px;
      font-weight: bold;
      color: var(--vitamui-grey-900);
    }
  }
}