/* controls.css - Buttons, inputs, forms */
button {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}

button:hover {
  background-color: var(--color-surface);
}

.tool-button {
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.tool-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.tool-button.active {
  background-color: var(--color-primary);
  color: white;
}

input,
select {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 3px 5px;
  color: var(--color-text);
  background: var(--color-background);
  font: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

#export-menu-container {
  margin-left: var(--spacing-md);
  margin-right: auto;
}

.export-menu {
  display: flex;
  gap: var(--spacing-sm);
}

.export-confirmation {
  width: min(32rem, calc(100vw - 2rem));
  padding: var(--spacing-lg);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.export-confirmation::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.export-confirmation p {
  margin-top: var(--spacing-sm);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

@media (max-width: 992px) {
  button,
  input,
  select {
    min-height: 44px;
  }

  .tool-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .btn-icon,
  .project-action-icon {
    min-width: 44px;
  }

  .ol-control button {
    min-width: 44px;
    min-height: 44px;
  }

  .dialog-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .export-confirmation {
    padding: var(--spacing-md);
  }

  .dialog-actions {
    flex-direction: column-reverse;
  }

  .dialog-actions button {
    width: 100%;
  }
}