.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-container {
  position: fixed;
  top: 10px;
  right: 197px;
  left: calc(100vw - 36px - 197px);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  background-color: transparent;

  transition:
    top 0.3s ease,
    left 0.3s ease,
    right 0.3s ease,
    height 0.3s ease,
    width 0.3s ease;

  .search-close {
    position: absolute;
    right: calc((100vw - 830px) / 2);

    display: none;

    opacity: 0;

    transition: opacity 0.3s ease;
  }

  &.focused {
    position: fixed;
    z-index: 99999;
    inset: 0;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;

    width: 100vw;
    height: 100vh;

    opacity: 0.98;
    background-color: var(--sdesk-search-bg-color);

    .search-close {
      top: 20px;
      right: 15px;
      display: flex;
      opacity: 1;

      &:hover {
        opacity: 0.8;
      }
    }

    .search-head {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: flex-start;

      width: 100%;
      padding: 12px 0;

      background-color: var(--color-gray-fff);

      // background-color: var(--sdesk-search-bg-color);
    }

    .search-wrapper {
      width: 800px;

      input {
        display: inline-block;
        padding: 17px 32px 17px 17px;
        border-radius: 5px;
      }

      button {
        display: flex;
      }
    }
  }
}

.search-wrapper {
  position: relative;

  input {
    position: relative;

    display: none;

    width: 100%;
    padding: 12px 26px 2px 10px;

    font-size: 18px;

    border: 0 none;
    border-radius: 50%;
    outline: none;

    transition:
      padding 0.1s ease,
      border-radius 0.1s ease;
  }

  button {
    cursor: pointer;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: none;
    align-items: center;

    padding: 0 10px;

    color: transparent;

    background-color: transparent;
    border: 0 none;
    border-radius: 0 3px 3px 0;
  }
}

.dnone {
  display: none;
}

.search-button {
  cursor: pointer;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  font-size: 14px;

  background-color: #0074e0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 80%), rgb(255 255 255 / 80%)),
    linear-gradient(to right, #0074e0, #0074e0);
  border: 2px solid white;
  border-radius: 20px;

  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.8;
  }
}