/* Button Component - BEM Structure */
.btn {
  /* CSS Variables for button sizing */
  --btn-padding-small: var(--space-sm) var(--space-md);
  --btn-padding-default: var(--space-md) var(--space-lg);
  --btn-padding-large: var(--space-lg) var(--space-xl);
  --btn-font-size-small: 14px;
  --btn-font-size-default: 16px;
  --btn-font-size-large: 18px;
  --btn-icon-size-small: 0.875rem;
  --btn-icon-size-default: 1rem;
  --btn-icon-size-large: 1.25rem;

  /* Base button styles */
  padding: var(--btn-padding-default);
  font-size: var(--btn-font-size-default);
  line-height: 1;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.15s ease-out, filter 0.15s ease-out;
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  gap: 0.25rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: max-content;
  position: relative;
  
  /* Default variant styles */
  background-color: var(--surface-2);
  color: var(--text-1);
}

/* Button icon element */
.btn .btn__icon,
.btn img {
  flex-shrink: 0;
  width: var(--btn-icon-size-default);
  height: var(--btn-icon-size-default);
}

/* Default hover/active states */
.btn:hover {
  background-color: var(--surface-3);
}

.btn:active {
  background-color: var(--surface-4);
}

/* Dark mode for default variant */
@media (prefers-color-scheme: dark) {
  .btn {
    background-color: var(--surface-4);
  }

  .btn:hover {
    background-color: var(--surface-5);
  }

  .btn:active {
    background-color: var(--surface-6);
  }

  .btn .btn__icon,
  .btn img {
    filter: invert(100%);
  }
}

/* Size modifiers */
.btn--small {
  padding: var(--btn-padding-small);
  font-size: var(--btn-font-size-small);
}

.btn--small .btn__icon,
.btn--small img {
  width: var(--btn-icon-size-small);
  height: var(--btn-icon-size-small);
}

.btn--large {
  padding: var(--btn-padding-large);
  font-size: var(--btn-font-size-large);
}

.btn--large .btn__icon,
.btn--large img {
  width: var(--btn-icon-size-large);
  height: var(--btn-icon-size-large);
}

/* Style modifiers */
.btn--primary {
  background-color: var(--brand);
  color: #FFFFFF;
}

.btn--primary:hover {
  filter: brightness(1.1);
  background-color: var(--brand);
}

.btn--primary:active {
  filter: brightness(0.95);
  background-color: var(--brand);
}

.btn--danger {
  background-color: var(--app-danger);
  color: var(--surface-1);
}

.btn--danger:hover {
  filter: brightness(1.1);
  background-color: var(--app-danger);
}

.btn--danger:active {
  filter: brightness(0.95);
  background-color: var(--app-danger);
}

.btn--outline {
  background: none;
  color: var(--text-1);
  border: 1px solid var(--text-2);
}

.btn--outline:hover {
  background-color: var(--surface-2);
}

.btn--outline:active {
  background-color: var(--surface-3);
}

.btn--naked {
  background-color: transparent;
  color: var(--text-1);
  border: 1px solid transparent;
  box-shadow: none;
}

.btn--naked:hover {
  background-color: var(--surface-2);
}

.btn--naked:active {
  background-color: var(--surface-3);
}

@media (prefers-color-scheme: dark) {
  .btn--naked .btn__icon,
  .btn--naked img {
    filter: invert(100%);
  }
}

.btn--dark {
  background-color: var(--dark);
  color: var(--light);
}

.btn--dark:hover {
  filter: brightness(1.1);
  background-color: var(--dark);
}

.btn--dark:active {
  filter: brightness(0.95);
  background-color: var(--dark);
}

/* State modifiers */
.btn--active {
  background-color: var(--surface-4);
}

@media (prefers-color-scheme: dark) {
  .btn--active {
    background-color: var(--surface-6);
  }
}

/* Unstyled button defaults */
input[type="submit"]:not([class]),
button:not([class]) {
  border: none;
  background: black;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 1;
  transition: opacity .15s ease-in;
  font-weight: 500;
}

input[type="submit"]:not([class]):hover,
button:not([class]):hover {
  opacity: .5;
}

input[type="submit"]:not([class]):focus,
button:not([class]):focus {
  opacity: .5;
}

input[type="submit"]:not([class]):active,
button:not([class]):active {
  opacity: .8;
  transition: opacity .15s ease-out;
}

@media (prefers-color-scheme: dark) {
  input[type="submit"]:not([class]),
  button:not([class]) {
    background: white;
    color: black;
  }
}

/* Special styles for markdown action buttons */
.markdown-actions .btn--naked {
  justify-content: flex-start;
  text-align: left;
}