.rp-search-panel__mask {
  backdrop-filter: blur(5px);
  z-index: 100;
  background: #3c3c3c66;
  position: fixed;
  inset: 0;
}

.rp-search-panel__modal {
  background-color: var(--rp-c-bg-soft);
  border-radius: var(--rp-radius);
  max-width: 560px;
  height: auto;
  margin: 80px auto auto;
  padding: 20px;
  position: relative;
}

.rp-search-panel__header {
  align-items: center;
  display: flex;
}

.rp-search-panel__cancel {
  color: var(--rp-c-brand);
  cursor: pointer;
  margin-left: .5rem;
}

@media (width >= 640px) {
  .rp-search-panel__cancel {
    display: none;
  }
}

.rp-search-panel__input-form {
  background-color: var(--rp-c-bg);
  border: 1px solid var(--rp-c-brand);
  border-radius: var(--rp-radius-small);
  align-items: center;
  width: 100%;
  height: 55px;
  padding: 0 12px;
  display: flex;
}

.rp-search-panel__input {
  background-color: var(--rp-c-bg);
  outline: none;
  flex: 1;
  width: 80%;
  height: 100%;
  padding-left: 8px;
  font-size: 20px;
  font-weight: 500;
}

.dark .rp-search-panel__input {
  color: var(--rp-c-text);
}

.rp-search-panel__close:hover {
  cursor: pointer;
  color: var(--rp-c-brand);
  transition: color .3s;
}

.rp-search-panel__results {
  max-height: calc(100vh - 230px);
  padding-right: 2px;
  overflow: scroll;
}

.rp-search-panel__loading {
  opacity: .8;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
  display: flex;
}

.rp-search-panel__tabs {
  background-color: var(--rp-c-bg-soft);
  padding-bottom: 6px;
  position: sticky;
}

.rp-search-panel__tabs.rp-tabs {
  border: none;
  border-radius: 0;
  margin: 0;
}

.rp-search-panel__group {
  padding-bottom: .5rem;
}

@media (width <= 960px) {
  .rp-search-panel__modal {
    margin-top: 0;
  }

  .rp-search-panel__input-form {
    height: 40px;
  }

  .rp-search-panel__input-form svg {
    width: 16px;
    height: 16px;
  }

  .rp-search-panel__input {
    font-size: 16px;
  }
}