// =============================================================================
// Cache Card — Cache management card for settings page
// =============================================================================

@use '../variables' as *;

.cache-card {
  background-color: #fff;
  border: 1px solid $neutral-200;
  border-radius: $radius-xl;
  padding: 1.5rem;

  .dark & {
    background-color: $neutral-800;
    border-color: $neutral-700;
  }
}

.cache-card__title {
  font-size: $font-size-lg;
  line-height: $line-height-lg;
  font-weight: $font-weight-semibold;
  color: $neutral-900;
  margin-bottom: 1.25rem;

  .dark & {
    color: $neutral-50;
  }
}

// -----------------------------------------------------------------------------
// Sections
// -----------------------------------------------------------------------------

.cache-card__section {
  margin-bottom: 1.25rem;

  &--bordered {
    padding-top: 1rem;
    border-top: 1px solid $neutral-100;

    .dark & {
      border-top-color: $neutral-700;
    }
  }
}

.cache-card__section-title {
  font-size: $font-size-sm;
  line-height: $line-height-sm;
  font-weight: $font-weight-medium;
  color: $neutral-600;
  margin-bottom: 0.75rem;

  .dark & {
    color: $neutral-400;
  }
}

// -----------------------------------------------------------------------------
// Button group
// -----------------------------------------------------------------------------

.cache-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

// -----------------------------------------------------------------------------
// Action button
// -----------------------------------------------------------------------------

.cache-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
  font-weight: $font-weight-medium;
  border-radius: $radius-lg;
  border: 1px solid;
  transition: color $transition-fast, background-color $transition-fast, border-color $transition-fast;
  cursor: pointer;
  background: none;

  &--warning {
    border-color: $warning-300;
    color: $warning-700;

    &:hover {
      background-color: $warning-50;
    }

    .dark & {
      border-color: $warning-600;
      color: $warning-300;

      &:hover {
        background-color: rgba($warning-900, 0.2);
      }
    }
  }

  &--info {
    border-color: $primary-300;
    color: $primary-700;

    &:hover {
      background-color: $primary-50;
    }

    .dark & {
      border-color: $primary-600;
      color: $primary-300;

      &:hover {
        background-color: rgba($primary-900, 0.2);
      }
    }
  }

  &--danger {
    border-color: $error-300;
    color: $error-700;

    &:hover {
      background-color: $error-50;
    }

    .dark & {
      border-color: $error-600;
      color: $error-300;

      &:hover {
        background-color: rgba($error-900, 0.2);
      }
    }
  }

  &--disabled {
    border-color: $neutral-200;
    color: $neutral-400;
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
    }

    .dark & {
      border-color: $neutral-600;
      color: $neutral-400;

      &:hover {
        background-color: transparent;
      }
    }
  }
}

.cache-card__btn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.cache-card__btn-spinner {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  animation: spin 1s linear infinite;
}

// -----------------------------------------------------------------------------
// Result message
// -----------------------------------------------------------------------------

.cache-card__result {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: $radius-lg;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: $font-size-sm;
  line-height: $line-height-sm;
  border: 1px solid;

  &--success {
    background-color: $success-50;
    border-color: $success-200;
    color: $success-700;

    .dark & {
      background-color: rgba($success-900, 0.2);
      border-color: $success-700;
      color: $success-300;
    }
  }

  &--error {
    background-color: $error-50;
    border-color: $error-200;
    color: $error-700;

    .dark & {
      background-color: rgba($error-900, 0.2);
      border-color: $error-700;
      color: $error-300;
    }
  }
}

.cache-card__result-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
