@import 'main.css';

/* --------------------------------------------------
|| Search Forms
-------------------------------------------------- */
/* Search Form Wrapper */
.search-form-wrapper {
  width: 100%;
  background-color: var(--color-secondary);
  border: 2px solid #fff;
  padding: 1rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  -ms-border-radius: 0.625rem;
  -o-border-radius: 0.625rem;
  border-radius: 0.625rem;
  position: relative;
  margin-inline: auto;
  z-index: 9;
}

/* Search Tabs Wrapper */
.search-tabs-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  font-weight: 400;
  font-size: 110%;
  letter-spacing: 0.5px;
}

/* Search Tabs */
.search-form-tab {
  text-align: center;
  padding: 0.5rem 0.825rem;
  margin-block: 0.125rem;
  width: min(12rem, 100%);
  cursor: pointer;
  background-color: var(--color-accent);
  color: #fff;
  box-sizing: border-box;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  border: 2px solid #fff;

  @media (max-width: 450px) {
    width: 100%;
  }
}
.search-form-tab.active,
.search-form-tab:focus,
.search-form-tab:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* Search Tab Contents */
.search-tab-content {
  display: none;
  /* padding: 1rem; */
  width: 100%;
  box-sizing: border-box;
  border-radius: 0.875rem;
  -webkit-border-radius: 0.875rem;
  -moz-border-radius: 0.875rem;
  -ms-border-radius: 0.875rem;
  -o-border-radius: 0.875rem;
}
.search-tab-content.active {
  display: block;
}

/* Search Form Elements */
.search-form-elements {
  margin-block-start: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}
.search-form-elements > * {
  width: min(12rem, 100%);
  padding: 0.5rem 0.825rem;
  border: 2px solid var(--color-primary);
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  border-radius: 0.5rem;
  background-color: transparent;
  color: #fff;

  @media (max-width: 450px) {
    width: 100%;
  }
}

.search-form-elements input[type='submit'] {
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid #fff;
  font-weight: 500;
  cursor: pointer;
}

.search-form-elements button {
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid #fff;
  font-weight: 500;
}

.search-form-elements #project_names_list,
.search-form-elements #developer_names_list {
  outline: 1px solid var(--color-primary);
}
.search-form-elements input::placeholder {
  color: #fff !important;
}
.search-form-elements select option {
  background-color: var(--color-secondary);
  color: #fff;
}