@import "../../style/CommonStyle.module.less";
@import "../../style/utils.module.less";

.container {
  width: fit-content;
  height: fit-content;
  position: relative;

  .input {
    margin-right: 0;
    margin-left: 0;
    height: 100px !important;
    padding: 20px 40px 20px 50px !important;
    border-radius: 50px;
    border: 5px solid #ccc;
    background-color: #fff !important;
    width: 100% !important;

    &:focus-within,
    &:hover,
    &:focus {
      box-shadow: 0 0 0 2px #fefefe inset;
      border: 5px solid @PRIMARY_COLOR_RED;
    }

    > div {
      display: none;
    }

    > input {
      font-family: @baseFont;
      color: @COLOR_GRAY07 !important;
      height: inherit !important;
      line-height: inherit !important;
    }
  }

  .withIcon {
    > div {
      display: none;
    }
  }

  .search {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 41px;
    height: 41px;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    background-image: url("../../../assets/searchpanel/ico_search_submit.png");

    &:focus-within,
    &:hover,
    &:focus {
      width: 43px;
      height: 43px;
      transform: translateY(-50%) scale(1.1);
      background-position: center bottom;
    }
  }
}
