@tailwind base;
@tailwind components;
@tailwind utilities;

/* Force some utility class generation */
.test-component {
  @apply bg-primary text-secondary-100;
}

* {
  font-family: sans-serif;
  font-size: 16px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.font-bold {
  font-weight: 700;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
}

.align-items-center {
  align-items: center;
}

.grid {
  display: grid;
}

.verben-error-message {
  font-size: 0.8rem;
  color: var(--vbn-color-error);
}

.verben-input {
  border: 1px solid var(--vbn-color-border);
  outline: none;
  border-radius: 5px;
  color: var(--vbn-color-text);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    box-shadow 0.2s, outline-color 0.2s;
}

.verben-input::placeholder {
  color: var(--vbn-color-text-muted);
}

.verben-input:hover {
  border: 1px solid var(--vbn-color-text-muted);
}

.verben-input.disabled {
  opacity: 1;
  background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
  pointer-events: none;
  color: var(--vbn-color-text-muted);
}

.verben-input:disabled {
  opacity: 1;
  background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
  pointer-events: none;
  color: var(--vbn-color-text-muted);
}

.verben-input.focused {
  border-color: var(--vbn-color-border-focus);
  outline: none;
}

.verben-input:focus {
  border-color: var(--vbn-color-border-focus);
  outline: none;
}

.verben-input.ng-invalid {
  border-color: var(--vbn-color-error);
}

.verben-button {
  padding: 8px 15px;
  border-radius: 4px;
  border: none;
  text-align: center;
}

.verben-button.primary {
  background-color: var(--vbn-color-primary);
}

.verben-button.secondary {
  background-color: rgba(217, 217, 217, 0.25);
}
.tabs {
  background: var(--vbn-color-text-muted);
  width: 100%;
  border-radius: 5px;
  padding: 10px 20px;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.tab.active {
  background-color: var(--vbn-color-surface);
  border-radius: 5px;
  height: 32px;
  width: 131px;
  color: var(--vbn-color-primary);
  box-shadow: 0px 2px 7px 0px #00000040;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.03em;
}
.tab.inactive {
  background: transparent;
  color: var(--vbn-color-text-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.03em;
}