@use '../utils' as *;

/*=============================
	1. Search Popup
===============================*/
.popup-search-box {
    position: fixed;
    top: 0;
    left: 50%;
    background-color: var(--tg-heading-color);
    width: 100.1%;
    height: 0px;
    overflow: hidden;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: all ease 0.4s;
  
  
    button.searchClose {
      width: 60px;
      height: 60px;
      line-height: normal;
      position: absolute;
      top: 40px;
      right: 40px;
      background-color: transparent;
      font-size: 18px;
      border-radius: 50%;
      border: 2px solid var(--tg-color-white-default);
      transform: rotate(0);
      transition: all ease 0.4s;
      color: var(--tg-color-white-default);
      &:hover {
        color: var(--tg-body-color);
        background-color: #2e2e2d;
        border-color: transparent;
        border-color: transparent;
        transform: rotate(90deg);
      }
    }
  
    form {
      position: absolute;
      top: 50%;
      left: 50%;
      display: inline-block;
      padding-bottom: 0px;
      cursor: auto;
      width: 100%;
      max-width: 900px;
      transform: translate(-50%, -50%);
      transition: transform ease 0.4s;
      @media #{$lg} {
          max-width: 600px;
      }
  
      input {
        font-size: 24px;
        font-weight: 400;
        height: 70px;
        width: 100%;
        border: none;
        background-color: transparent;
        border-bottom: 2px solid var(--tg-color-white-default);
        padding: 0 80px 0 0px;
        color: var(--tg-color-white-default);
        border-radius: 0px;
        &::placeholder {
            color: rgba($color: #F6F5F3, $alpha: 0.5);
        }
      }
  
      button {
        position: absolute;
        top: 0px;
        background-color: transparent;
        border: none;
        color: var(--tg-theme-primary);
        font-size: 24px;
        right: 0px;
        cursor: pointer;
        width: auto;
        height: 70px;
        transition: all ease 0.4s;
        transform: scale(1.001);
        filter: brightness(99999);
        &:hover {
          transform: scale(1.1);
        }
      }
  
    }
  
    &.show {
      opacity: 1;
      visibility: visible;
      width: 100.1%;
      height: 350px;
      transition: all ease 0.4s;
      border-radius: 0;
  
      form {
        transition-delay: 0.5s;
      }
    }
  
  }
@media #{$xs} {
    .popup-search-box form {
        width: 80%;
    }
    .popup-search-box form input {
        height: 60px;
    }
    .popup-search-box form button {
        width: 60px;
        line-height: 62px;
        height: 60px;
    }
}