@import "tailwindcss";

@layer components {
  .playground {
    font-size: var(--vocs-fontSize_14);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* borderAccent */
  .playground select,
  .playground input {
    width: 100%;
    padding: 0.3rem 0.6rem;
    /* background-color: var(--vocs-color_background2); */
    border: 1px solid var(--vocs-color_border);
    border-radius: var(--vocs-borderRadius_2);
    transition: border-color 0.15s ease;
  }

  .playground select:focus,
  .playground input:focus {
    outline: none;
    border-color: var(--vocs-color_borderAccent);
  }

  /* Button styles */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vocs-color_backgroundAccent) !important;
    color: var(--vocs-color_text) !important;
    border: none;
    padding: 0.3rem 0.75rem;
    border-radius: var(--vocs-borderRadius_2);
    font-weight: var(--vocs-fontWeight_medium);
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .btn-ghost {
    background: var(--vocs-color_background2) !important;
    color: var(--vocs-color_text);
  }

  .btn-destructive {
    background: var(--vocs-color_backgroundRedTint) !important;
    color: var(--vocs-color_textRed) !important;
  }

  .btn:hover:not(:disabled) {
    background: var(--vocs-color_backgroundAccentHover) !important;
  }

  .btn-ghost:hover:not(:disabled) {
    background: var(--vocs-color_background4) !important;
  }

  .btn-destructive:hover:not(:disabled) {
    background: var(--vocs-color_backgroundRedTint2) !important;
  }

  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--vocs-color_borderAccent);
  }

  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .text-accent {
    color: var(--vocs-color_textAccent);
  }

  .text-muted {
    color: var(--vocs-color_text3);
  }

  /* Reapply vocs logic */
  .vocs_Pre_wrapper:hover .vocs_CopyButton {
    opacity: 1 !important;
  }

  /* Overrides */
  @media (max-width: 640px) {
    .vocs_CodeBlock code {
      font-size: 12px !important;
    }
  }
}