.input-search {
  display: flex;
  align-items: center;
  position: relative;
  direction: rtl;
  width: 60px;
  color: var(--colorBlue);
  transition: width 0s 0.3s;

  & .input-search__field {
    appearance: none;
    width: 100%;
    outline: 0;
    margin: 0;
    height: 100%;
    border-radius: 20px;
    font-size: 16px;
    background: transparent;
    transition: all 0.3s;
    border: none;
    padding: 0;
  }

  & .input-search__field::placeholder {
    font-size: 14px;
  }

  & .input-search__field-wrap {
    text-align: left;
    position: relative;
    direction: ltr;
    color: var(--colorBlue);
    transition: all 0.3s ease-in-out, background 0.15s ease-in-out 0.15s;
    width: 60px;
    border: 1px solid #ffffff;
    border-radius: 20px;
    height: 40px;
  }

  & .input-search__icon-search {
    display: flex;
    align-items: center;
    font-weight: bold;
    padding: var(--spacingSmaller) calc(var(--spacingLarge) * 2)
      var(--spacingSmaller) var(--spacingLarge);
    color: var(--colorMilaRed);
    @media (--screenXL) {
      display: none;
    }
  }

  & .input-search__icon-search ~ .input-search__icon {
    left: revert !important;
    right: 22px;
  }

  & .input-search__icon {
    position: absolute;
    height: 16px;
    right: 22px;
    top: 50%;
    transform: translate(0, -50%);
    color: #ffffff;
    transition: all 0.3s, opacity 0.15s;
    cursor: pointer;

    &:first-child {
      transition: all 0.3s, opacity 0.15s 0.15s;
    }
  }

  & .input-search__label {
    font-size: 0.8em;
    font-weight: var(--fontWeightBold);
    margin-bottom: 4px;
    display: block;
  }
}

.search-hover {
  &:hover {
    & .input-search__field-wrap {
      border-color: var(--colorMilaRed);
      color: var(--colorMilaRed);

      & .input-search__icon,
      & .input-search__icon-search {
        font-weight: bold;
        color: var(--colorMilaRed);
      }
    }
  }
}

.search-hover.input-search-sticky {
  &:hover {
    & .input-search__field-wrap {
      border: 1px solid var(--colorMilaBlueDark);
    }
    & .input-search__icon {
      color: var(--colorMilaBlueDark);
    }
  }
}

.input-search-open {
  width: 500px;
  transition: width 0s 0s;
  & .input-search__field-wrap {
    background: #ffffff;
    width: 100%;
    & .input-search__field {
      padding: 0 0 0 16px;
    }
    & .input-search__icon {
      color: var(--colorMilaBlue);
      transition: all 0.3s, opacity 0.15s;
      &:nth-of-type(2) {
        transition: all 0.3s, opacity 0.15s 0.15s;
      }
    }
  }
}

.input-search-sticky {
  & .input-search__field-wrap {
    border: 1px solid var(--colorMilaBlue);
  }
  & .input-search__icon {
    color: var(--colorMilaBlue);
  }
}

.input-search-open.input-search-mobile {
  width: 100% !important;
  & .input-search__field-wrap {
    width: 100% !important;
  }
}

.input-search-mobile {
  width: auto;

  & .input-search__field-wrap {
    border: 1px solid var(--colorMilaRed);
    width: auto;
    direction: ltr;

    & .input-search__field {
      padding: 0 0 0 48px;
    }
  }
  & .input-search__icon {
    color: var(--colorMilaRed);
    position: absolute;
    height: 16px;
    left: 22px;
    top: 50%;
    transform: translate(0, -50%);
    transition: all 0.3s, opacity 0.15s;
    cursor: pointer;
    & g {
      stroke: var(--colorMilaRed);
    }
  }

  &.input-search {
    direction: ltr;
  }
  & .svg__wrapper {
    left: 0;
  }
}

.svg {
  display: flex;
  height: 100%;
}
.svg__wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  cursor: pointer;
  max-width: 60px;
  right: 0;
}

/* OLD */

.input-search-normal {
  & .input-search__field {
    appearance: none;
    width: 100%;
    border: 1px solid var(--colorMilaGreyLight);
    background: var(--colorMilaGreyLight);
    padding: 8px;
    border-radius: 5px;
    outline: 0;
    margin: 0;
    height: 45px;
    padding: 10px 18px 10px 57px;
    border-radius: 20px;
    font-size: 16px;

    @media (min-width: 1440px) {
      padding-right: 20px;
    }
  }

  & .input-search__field::placeholder {
    font-size: 14px;
  }

  & .input-search__field-wrap {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--colorBlue);
  }

  & .input-search__icon {
    position: absolute;
    left: 24px;
    width: 19px;
    height: 19px;
    top: 50%;
    transform: translateY(-50%);
  }

  & .input-search__label {
    font-size: 0.8em;
    font-weight: var(--fontWeightBold);
    margin-bottom: 4px;
    display: block;

    @media (--screensMedium) {
      color: var(--colorWhite);
    }
  }
}