/**
 * Feedback Vote Component Styles
 *
 * Uses CSS Custom Properties from the Design System.
 */

/* Import design system variables */
@import url('../../../styles/design-system.css');

/* Container */
.prorank-feedback-vote {
  display: inline-flex;
  align-items: center;
  gap: var(--pr-spacing-small, 8px);
  padding: var(--pr-spacing-small, 8px) var(--pr-spacing-medium, 12px);
  background: var(--pr-gray-50, #fafafa);
  border-radius: var(--pr-radius-medium, 8px);
  border: var(--pr-border-width) solid var(--pr-border-light, var(--pr-color-border-light));
  font-size: var(--pr-font-size-small, 13px);
  transition: opacity var(--pr-motion-duration-fast, 200ms)
    var(--pr-motion-easing-standard, ease-in-out);
}

/* Label */
.prorank-feedback-vote__label {
  color: var(--pr-text-secondary, #555);
  margin-right: var(--pr-spacing-xsmall, 4px);
}

/* Buttons Container */
.prorank-feedback-vote__buttons {
  display: flex;
  gap: var(--pr-spacing-xsmall, 4px);
}

/* Button Base */
.prorank-feedback-vote__button {
  background: transparent !important;
  border: var(--pr-border-width) solid transparent !important;
  padding: var(--pr-spacing-xsmall, 4px) !important;
  min-width: auto !important;
  height: auto !important;
  border-radius: var(--pr-radius-small, 4px) !important;
  transition: all var(--pr-motion-duration-fast, 200ms)
    var(--pr-motion-easing-standard, ease-in-out);
}

.prorank-feedback-vote__button svg {
  width: var(--pr-size-4);
  height: var(--pr-size-4);
  fill: var(--pr-gray-400, #a1a1aa);
  transition: fill var(--pr-motion-duration-fast, 200ms)
    var(--pr-motion-easing-standard, ease-in-out);
}

/* Hover States */
.prorank-feedback-vote__button:hover:not(:disabled) {
  background: var(--pr-gray-100, #f4f4f5) !important;
  border-color: var(--pr-gray-200, #e4e4e7) !important;
}

.prorank-feedback-vote__button--up:hover:not(:disabled) svg {
  fill: var(--pr-color-success, #10b981);
}

.prorank-feedback-vote__button--down:hover:not(:disabled) svg {
  fill: var(--pr-color-error, #ef4444);
}

/* Active/Voted State */
.prorank-feedback-vote__button.is-voted {
  background: var(--pr-gray-100, #f4f4f5) !important;
  border-color: var(--pr-gray-300, #d4d4d8) !important;
}

.prorank-feedback-vote__button--up.is-voted svg {
  fill: var(--pr-color-success, #10b981);
}

.prorank-feedback-vote__button--down.is-voted svg {
  fill: var(--pr-color-error, #ef4444);
}

/* Disabled State */
.prorank-feedback-vote__button:disabled {
  opacity: var(--pr-opacity-50);
  cursor: not-allowed;
}

/* Thanks Message */
.prorank-feedback-vote__thanks {
  color: var(--pr-color-success, #10b981);
  font-weight: var(--pr-font-weight-medium, 500);
  animation: fade-in var(--pr-motion-duration-fast, 200ms)
    var(--pr-motion-easing-standard, ease-in-out);
}

/* Focus State */
.prorank-feedback-vote__button:focus {
  outline: var(--pr-border-width-thick) solid var(--pr-color-primary);
  outline-offset: var(--pr-spacing-0-5);
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Inline Variant */
.prorank-feedback-vote--inline {
  background: transparent;
  border: none;
  padding: 0;
  margin-left: var(--pr-spacing-small, 8px);
}

.prorank-feedback-vote--inline .prorank-feedback-vote__label {
  display: none;
}

/* Section-level Variant */
.prorank-feedback-vote--section {
  margin-top: var(--pr-spacing-medium, 16px);
  padding: var(--pr-spacing-medium, 16px);
  background: var(--pr-gray-50, #fafafa);
  border-radius: var(--pr-radius-medium, 8px);
  width: auto;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .prorank-feedback-vote {
    border-width: var(--pr-border-width-thick);
  }

  .prorank-feedback-vote__button.is-voted {
    border-width: var(--pr-border-width-thick);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .prorank-feedback-vote,
  .prorank-feedback-vote__button,
  .prorank-feedback-vote__button svg,
  .prorank-feedback-vote__thanks {
    transition: none;
    animation: none;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .prorank-feedback-vote {
    background: var(--pr-gray-800, #27272a);
    border-color: var(--pr-gray-700, #3f3f46);
  }

  .prorank-feedback-vote__button:hover:not(:disabled) {
    background: var(--pr-gray-700, #3f3f46) !important;
    border-color: var(--pr-gray-600, #52525b) !important;
  }

  .prorank-feedback-vote__button.is-voted {
    background: var(--pr-gray-700, #3f3f46) !important;
    border-color: var(--pr-gray-600, #52525b) !important;
  }
}

/* WordPress Admin Dark Mode */
.wp-admin.prorank-dark-theme .prorank-feedback-vote {
  background: var(--pr-color-background-dark);
  border-color: var(--pr-color-border-dark);
}

.wp-admin.prorank-dark-theme .prorank-feedback-vote__label {
  color: var(--pr-color-text-secondary-dark);
}

.wp-admin.prorank-dark-theme .prorank-feedback-vote__button:hover:not(:disabled) {
  background: var(--pr-color-background-secondary-dark) !important;
  border-color: var(--pr-color-border-hover-dark) !important;
}