.pac-container {
  box-shadow: none;
  font-family: $default_font_family;
  border-radius: 0;
  border-top: 0;
  margin-top: em(-45px);
  transform: translateY(-100%);
  .pac-icon {
    display: none;
  }
  .pac-item {
    line-height: em(40px);
    padding: 0 em(5px) 0 em(20px);
    border-top: em(1px) solid $light_gray;
    &:last-child {
      border-bottom: em(1px) solid $light_gray;
    }
  }
  .pac-item, .pac-item-query {
    font-size: em(16px);
  }
  &:after {
    display: none;
  }
}

.journey_calculator {
  margin: em(30px) 0;
  .section__text {
    margin: 0 0 em(10px);
  }
}

.journey_calculator__input {
  position: relative;
  padding-right: em(105px);
  transition: padding 0.3s ease-in-out;
  will-change: padding;
  input[type="text"] {
    border: none;
    background: $white;
    height: em(45px);
  }
  &.loaded {
    .journey_calculator__result {
      opacity: 1;
    }
  }
  &.error {
    .journey_calculator__result {
      opacity: 0;
    }
  }
  &.error + .journey_calculator__message {
    display: block;
  }
}

.journey_calculator__result {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: em(95px);
  opacity: 0;
  line-height: em(45px);
  height: em(45px);
  background: $white;
  font-size: em(16px);
  font-weight: 900;
  font-family: $default_font_family;
  color: darken($dark_gray, 20);
  text-align: center;
  transition: opacity 0.3s ease-in-out;
  text-transform: uppercase;
  &:after {
    content: attr(data-duration) ' ' attr(data-label);
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
  }
  &.loading {
    opacity: 1;
    &:after {
      opacity: 0;
    }
    &:before {
      top: 50%;
      width: em(24px);
      height: em(24px);
      margin-top: em(-12px);
      margin-left: em(-12px);
    }
  }
}

.journey_calculator__message {
  width: 100%;
  margin-top: em(10px);
  font-weight: 500;
  font-size: em(16px);
  line-height: 1.3;
  display: none;
  color: $red;
}