.search-dialog
  position: fixed
  top: 5rem
  left: 50%
  z-index: 1001
  display: none
  margin-left: -18.75rem;
  padding: 1.25rem;
  width: 37.5rem;
  border-radius: 8px
  background: var(--search-bg)
  border-radius: 12px;
  box-shadow: var(--anzhiyu-shadow-lightblack);
  background: var(--anzhiyu-card-bg);
  border: var(--style-border);
  transition: .3s;

  +maxWidth768()
    top: 0
    left: 0
    margin: 0
    width: 100%
    height: 100%
    border-radius: 0 !important

  +maxHeight680()
    top: 2rem;

  +maxHeight580()
    top: 0
    left: 0
    margin: 0
    width: 100%
    height: 100%
    border-radius: 0 !important

  hr
    margin: 20px auto

  .search-nav
    margin: 0 0 14px
    color: $search-color
    font-size: 1.4em
    line-height: 1

    .search-dialog-title
      margin-right: 10px

    .search-close-button
      float: right
      color: $grey
      transition: color .2s ease-in-out

      &:hover
        color: $search-color

#search-mask
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
  z-index: 1000
  display: none
  background: rgba($dark-black, .6)