.search-tab {
  display: flex;

  overflow-y: scroll;
  overflow-x: hidden;
  
  height: 100%;
  width: 40%;
  max-width: min(500px, calc(500 * 0.1667vh));

  flex-direction: column;
  row-gap: max(12px, calc(12vh/12));

  border-radius: max(20px, calc(20vh/12));

  padding: max(12px, calc(12vh/12));
  background-color: rgba(60, 60, 60, 0.3);
}

.search-index {
  display: flex;
  width: 100%;
  gap: min(6px, calc(6 * 0.1667vh));

  align-items: stretch;
  flex-wrap: wrap;

  margin-bottom: min(8px, calc(8 * 0.1667vh));
}

.sort-search {
  flex: 1 1 min(200px, calc(200 * 0.1667vh));

  padding: min(4px, calc(4 * 0.1667vh)) min(12px, calc(12 * 0.1667vh));

  font-size: max(18px, calc(18vh/12)) !important;
  min-width: 0;

  transition: 0.3s;
}

.sort-search:hover {
  transform: scale(1.05);
}

.sort-indexes {
  display: flex;
  flex: 0 0 auto;

  gap: min(6px, calc(6 * 0.1667vh));

  flex-wrap: nowrap;
}

.sort-type,
.sort-order {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  flex: 1;

  background-color: rgb(10, 10, 10);
  color: white;

  padding: min(2px, calc(2 * 0.1667vh)) min(40px, calc(40 * 0.1667vh)) min(2px, calc(2 * 0.1667vh)) min(12px, calc(12 * 0.1667vh)); /* leave space for arrow */
  border: none;
  border-radius: min(99px, calc(99 * 0.1667vh));

  max-width: max(150px, calc(150vh/12));
  min-width: 0;

  font-size: max(18px, calc(18vh/12)) !important;
  cursor: pointer;

  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg fill='white' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right min(12px, calc(12 * 0.1667vh)) center;
  background-size: min(12px, calc(12 * 0.1667vh));

  transition: 0.3s;
}

.sort-type option,
.sort-order
option {
  font-size: max(18px, calc(12vh/12));
}

.sort-catagories {
  font-size: max(24px, calc(24vh/12)) !important;
}

.sort-options {
  display: flex;

  flex-direction: row;
  flex-wrap: wrap;
  align-content: start;

  column-gap: min(5px, calc(5 * 0.1667vh));
  row-gap: min(5px, calc(5 * 0.1667vh));
}