/* ModalSelect - StreamYard style select dropdown */

.container {
  width: 100%;
}

.label {
  display: block;
  color: #5f6368;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 8px;
}

.select {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  color: #202124;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.select:hover {
  border-color: #bdc1c6;
}

.select:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 1px #1a73e8;
}

/* Dark mode */
[data-theme="dark"] .label {
  color: #9aa0a6;
}

[data-theme="dark"] .select {
  background-color: #3c4043;
  border-color: #5f6368;
  color: #e8eaed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa0a6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .select:hover {
  border-color: #80868b;
}

[data-theme="dark"] .select:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 1px #8ab4f8;
}